Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Browser’

All browsers have different behaviors while rendering web pages. Even their versions have inconsistencies.

Although this is a bad thing, it is possible to make use of these inconsistencies for targeting the right browser and the right version (which is sometimes handy for debugging or applying code that will only be applied by the browser wanted).

Browserhacks

Browserhacks is a website which presents a list of browser-specific CSS and JavaScript hacks.

It is a single-page resource, includes hacks for Chrome, Safari, Firefox, IE + Opera and has a cool search box that eases finding the right hack instantly.

P.S. The project is open source and it is possible to contribute it with any new hacks.

CSS Browser Selector + is a tiny JavaScript code that empowers CSS selectors, enabling us to write specific CSS code for each operating system and browser.

It forces no hacks but promotes compliant code and also provides an alternative method of mediaqueries for older browsers.

CSS Browser Selector +

The details it can detect include browser, browser version, platform, platform version, device, device version, min-width/max-width screen detection and orientation screen detection (landscape or portrait).

A sample usage would look like: <html lang="pt-br" class="webkit chrome chrome21 win win8 js orientation_landscape minw_980 maxw_1199"> that is pretty self-explanatory.

Conditionizr is a smart jQuery plugin which detects the user’s browser + pixel ratio and allows serving specific conditional JavaScript and CSS files needed.

It has conditional <html> class additions for the browser and its version in use (like <html class="ie ie8">).

Conditionizr

Any script and style can be loaded for the defined browsers. Also, similar to <html> class additions feature, it can add specific classes for retina and non-retina devices.

And, another nice feature is the ability to return the OS of the visitor which is again useful for loading any custom scripts and styles.

There are many social networks, apps, programs and frameworks which are being used widely.

Pictonic Free is a huge icon font which has most of the popular items from the categories above and also includes browsers, operating systems and databases.

There are 220+ icons (letters) and it is a pretty useful set for icon font fans.

Pictonic Free

Detector is an open source PHP library for detecting many things about the browsing environment of a user.

It can get the browser used and browser's HTML5-CSS3 capabilities, analyze whether it is mobile, tablet, desktop or a spider and other stuff like color depth, viewport dimensions, cookie support, etc.

The library can automatically adapt itself to new browsers, versions and devices using the unique user-agent string of each browser. Simply, no need to update a browsers database.

Detector PHP Library

Detector makes use of Modernizr to get the HTML5-CSS3 features and runs the majority of the tests only once per user for a faster usage.

It offers a very useful grouping feature which allows us to define groups of browsers (like Chrome and Safari as a WebKit group, etc.) to take "per-group actions" easier.

This PHP library is a must-bookmark for serving browser-specific styles, JavaScript and content.

Years pass and browsers still render stuff very differently : ). It seems like they will keep doing so considering the different engines out there: WebKit, Gecko, IE, Presto (Opera).

They have different defaults, some CSS properties don't work on another and there can even be inconsistencies when rendering JavaScript.

BrowseEmAll is a Windows software for testing a website with many different browsers interactively and removing the pain out of the whole testing process.

BrowseEmAll

The software looks and works like a browser which allow us to select the rendering engine from a wide list of options:

  • Internet Explorer (7 – 9)
  • Firefox (3.6 – 12)
  • Chrome (12, 16, 19)
  • Safari (4, 5, 5.1)
  • Opera (10, 11)
  • iPhone, iPhone 4
  • iPad, iPad 2 simulator
  • Android (2.2, 2.3, 3.2 tablet, 4.0, 4.0 tablet)

It is also possible to select the resolution and viewport (landscape or portait) for mobile + tablet browsers.

Once a website is loaded with the browser of our preference, we can browse it like a regular website and see if things work as expected.

Under the loaded website, there is a useful little feature, "Inspect and Compare", for comparing the HTML + DOM structure of the loaded URL with another browser to better locate any possible inconsistencies.

BrowseEmAll Report

As BrowseEmAll works on our computer, we can also test websites hosted locally and no need to upload them to the web.

Besides browsing websites, the software can also automatically-generate cross-browser compatibility reports for selected browsers. The report includes screenshots with each browser and any HTML-CSS errors (if exists). 

To sum up, BrowseEmAll is a very good option for very quickly testing websites across multiple browsers with a single installation. Specially, the local testing feature makes it pretty unique.

How to join the giveaway?

BrowseEmAll is giving away 5 Professional licenses (worth $89/each).

In order to join the giveaway, you can choose one of the methods below or do both to increase your chances:

Winners will be selected randomly on 06 Jun 2012 (1 week later). Good luck to all.

The winners

Here they are:

  • DR (comment #607895)
  • ‏@ptamaro
  • Roger Willis (comment #605492)
  • Murat Pala (comment #610234)
  • @michelfortin

Congratulations to the winners and thanks to everyone for joining the giveaway.

Ok, right now, we can't stop ourselves from using the exciting CSS3 features. But, what about their compatibility? In which browsers they work ok? 

Browser Support is a simple search engine to find out which CSS properties are supported in which browsers.

Browser Support

With an auto-complete-powered search, it displays you all possible properties while typing and brings the results for all major browsers (Chrome, Safari, Firefox, IE, Opera).

Optionally, you can click the browser icons in the homepage and see the all properties supported for that browser with a breakdown of versions (IE6, IE7, etc..).

Google Browser Size is a visualization tool by Google Labs that shows any website behind an overlay of browser-window-sizes average

The overlay information is actually created from the data of people who visit Google (which won't be wrong to call it an average).

Google Browser Size

The tool is perfect for learning what percentage of the visitors are seeing the most important parts at initial load & what are they missing.

When you move the mouse, a rectangle which follows the mouse pointer enables us to interact with the website. And, optionally, the opacity level can be changed.

But, like mentioned, it is created with the data from google.com & will work for websites that target average internet users. It would be great to see this integrated into Google Analytics creating a custom overlay.

Opera, with version 10, is announcing a new feature named Opera Unite which converts any device running this browser into a web server.

It is an open platform where, using its API, developers can create new services/products (with HTML, CSS, JavaScript, SVG and AJAX) which will be served from user’s computers.

Opera Unite

It already comes with various ready-to-use services like:

  • file sharing
  • media player (reach your media from anywhere)
  • web server (host websites, currently static pages but won’t be surprising to see new ones supporting PHP, ASP.NET & others)
  • the lounge (for hosting a chat room)
  • & more..

To read more & download Opera Unite, click here.

Firebug LogoFirebug is probably one of the most helpful tools used when developing websites.

Specially, after JavaScript & Ajax became that much popular, it is hard to findout how we were developing & debugging without Firebug.

This great Firefox add-on, besides the ease of use & continious development by a talented team, has many features that make it a must-have like:

  • working inside browser, no need to switch apps.
  • being real-time, logging every request
  • ability to edit code & see results instantly
  • debugging JavaScript, measuring its performance & more..

It also has another feature, which is extendibility with help of Firefox add-ons.

There are various add-ons that can add more power to Firebug for creating better & faster. Here they are:

 

YSlow

YSlow Firebug Addon

YSlow is a Firebug add-on for analyzing web pages and getting suggestions on ways to improve the performance (parallel with the rules for high performance web pages).

YSlow grades web pages based on the predefined rulesets or a user-defined one . It also provides tools for performance analysis, including Smush.it™ and JSLint.

Page Speed

Firebug Page Speed

Very similar to YSlow, it is an add-on by the Google team for evaluating the performance of web pages and, best of all, getting suggestions (based on "Web Performance Best Practices") on ways to improve them.

Page Speed automatically optimizes images & provides compressed ones foruploading later.

It can also detect  JavaScript and CSS loaded that actually isn’t used for decreasing the total size of these files.

Read the rest of this entry »

Uptime Robot
feed-holder
FeedBurner
PHP Form Generator
HotScripts Marketplace
PSD2HTML.com