May 22

Pro CSS for High Traffic Websites Review

Pro CSS book cover

This book is as described and more. It focuses on a variety of aspects regarding front-end web development at the enterprise level. This includes team hierarchy, individual roles, tools, documentation, frameworks and methodologies so it goes beyond coding but it’s equally technical in nature. This is definitely not a beginner’s book because of the technical details so it’s possible to be overwhelmed with the amount of content. Any intermediate to advance front-end web developer will find this book useful and without doubt improve their skills even it’s just minor details. These include:
-why camel case is preferred
-why you shouldn’t use specific hacks but rather alternatives
-which tools make coding more efficient
Continue reading

Category: Code, Mobile | LEAVE A COMMENT
April 13

Make your website cross-browser compatible

cross browser compatibility

Forget about CSS hacks as they should only be temporary solutions and will eventually break upon browser updates.  You want robust CSS with minimal amount of HTTP calls for the best performance.  So here’s the code using conditional comments adding a class to theelement:

[code]<!–[if LTE 7 ]><html class="ie7"><[endif]–>
<!–[if IE 8 ]><html class="ie8"><![endif]–>
<!–[if IE 9 ]><html class="ie9"><![endif]–>
<!–[if gt IE 9 ]><!–><html><!–>![endif]–&gt;[/code]

The first line gives the body a class of “ie7” if the browser is Internet Explorer 7 or less, followed by lines detecting versions 8, 9, and greater than 9.   Now you can change the styles with CSS code as such:

 

[code]
#header { background-color: yellow; //default rule }
.ie7 #header { background-color: orange //rule for IE7 }
.ie8 #header { background-color: red //rule for IE8 }
.ie9 #header { background-color: blue //rule for IE9 }
[/code]

 
I didn’t discover this method so the credit goes to Paul Irish.

Limiting the number of stylesheets you are will improve the performance for a high-traffic website. So keep your media queries for alternative resolutions in the same file.

 

[code]
@media screen and (max-width: 320px) {
.iphones { width: 320px }
}
[/code]

Using a media query inside a link tag will actually load the css file and the images in it, even if the display is set to none,; except for Firefox and Opera.

[code]&lt;link href="iphone.css" rel="stylesheet" media="screen and (max-width: 320px)" />;
[/code]

For browser vendor specific CSS you can speed up your coding time with the web app PREFIXR.  It reads CSS3 styles and automatically applies your rule to work for the main other browsers.

  • -mos- for Mozilla
  • -webkit- for Apple browser Safari
  • -ms- for Microsoft
  • -o- for Opera