Posts Tagged: CSS

CSS-only: Load images on demand

The brain is a muscle, and as all muscles, it needs regular exercise to keep sharp.

Thats why I decided to take very old (but efficient) web optimization technique and implement it in new crazy way. You most likely heard about loading images (and other resources) on demand – which is not only a common sense, but also a good way to speedup initial page load.  Usually it is implemented via JavaScript, but today I’ll share with you how you can achieve the same effect by using pure CSS.

Read more!

Stylesheet limits in IE

Frankly speaking, I like/use IE because of two reasons:

1. It has good integration with VS, so it brings powerful javascript debugging tool for me. Firebug is absolutely the best debugging tool of all the times, but it can’t handle enterprise-level application debugging (it reaches the father and mother of memory very quickly).

2. Almost all enterprise-level users use IE because of their companies policy, so as a web developer I have to use whatever our users use.

But sometimes it makes me frustrating… Especially after looking for a needle in a haystack for a half of the day. Hope this post will save someone’s day.

KB 262161 outlines the maximum number of stylesheets and rules supported by Internet Explorer 6 to 9.

  • The browser will process up to 4095 rules, but not more
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep

The root of the limitations is that Internet Explorer uses a 32bit integer to identify, sort, and apply the cascading rules. The integer’s 32bits are split into five fields: four sheetIDs of 5 bits each, and one 12bit ruleID. The 5 bit sheetIDs results in the 31 @import limit, and the 12 bit ruleID results in the 4095 rules-per-page limitation. While these limits are entirely sufficient for most sites, there are some huge and/or flexible web applications which can encounter the limits.

Although IE10 Platform Preview #2 significantly raises the limits described above. In IE10 (any browser/document mode):

  • A page may contain up to 65534 rules
  • A document may use up to 4095 stylesheets
  • @import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)

So my advice here is to combine several stylesheets into single one in order to avoid more than 31 stylesheets on your page and try to minimize amount of styles applied to your page by using media queries or javascript code (similar to mobile web browsers).

Read more!

What CSS file to load for mobile?

Web pages have been displayed in broad set of browsers, screens and devices. Diversity of browsers implementations, screens resolutions and device-specific features such as device orientation (for mobile gadgets) make web development tough task nowadays.

If you’re just getting started with mobile design, you may face a number of hurdles, including the cost or technical challenge of designing and maintaining mobile web site which can be displayed properly on any device. This article discusses a first step toward mobile design that uses CSS to maximize interoperability across platforms.

Screen style sheets

Back to 1998, the HTML 4 spec offered ways to link to different style sheets depending on the devices targeted, including handheld media:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

Here we’ve included three stylesheets, the first screen.css targets desktops and laptops using the screen media type, while the second print.css apply printer-friendly styles (for more information on the basic principles involved in creating media-specific stylesheets for print, see “Print Different” at meyerweb.com.) The last one – mobile.css targets mobile devices using handheld.

CSS included a similar feature via @media:

@media screen { /* rules for computer screens */ } 
@media print { /* rules for print-friendly version */ } 
@media handheld { /* rules for handheld devices */ }

and through a parameter with @import:

@import "screen.css" screen; 
@import "print.css" print; 
@import "handheld.css" handheld;

Many mobile browsers have implemented this feature, but in different ways:

  • Some read only the handheld style sheet.
  • Some read only the handheld style sheet if there is one, but default to the screen style sheet otherwise.
  • Some read both the handheld style sheet and the screen style sheet.
  • Some read only the screen style sheet.

Let’s see what can we do in order to make our styles applied properly on any device. Since mobile devices typically have smaller screens, we can target handheld devices by detecting screens that are 480px and smaller:

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

While this targets most newer devices, many older devices don’t support media queries, so we’ll need a hybrid approach to get the largest market penetration.

First, define two stylesheets: screen.css with everything for normal browsers and antiscreen.css to overwrite any styles that you don’t want on mobile devices. Tie these two stylesheets together in another stylesheet core.css:

@import url("screen.css"); 
@import url("antiscreen.css") handheld; 
@import url("antiscreen.css") only screen and 
(max-device-width:480px);

Finally, define another stylesheet handheld.css with additional styling for mobile browsers and link them on the page:

<link rel="stylesheet" href="core.css" media="screen"/> 
<link rel="stylesheet" href="handheld.css" media="handheld, 
only screen and (max-device-width:480px)"/>

While this approach reaches a broad set of mobile devices, it is by no means perfect. Some mobile devices, such as iPad, are more than 480px width and will not work with this method. So you may consider another two options in order to solve styles problem in mobile world:

  • Use JavaScript to force them to read handheld style sheets (given that the browsers in this category are fairly recent ones, they are pretty likely to have a reasonable level of support for JavaScript).
  • Or, rely on server-side techniques to give them the handheld style sheet when they request the screen one.

Viewport Orientation

There is another case when you would like to load different/additional stylesheet – device orientation change. This means that different styles can be applied depending on whether the user is holding their phone vertically or horizontally.

To detect the device orientation, we can use a media query similar to the client-side device detection we discussed earlier. Within your stylesheet, include:

@import url("portrait.css") all and 
(orientation:portrait); 
@import url("landscape.css") all and 
(orientation:landscape);

Here portrait.css styles will be added for vertical devices and the landscape.css will be added for horizontal.

Be aware about this technique as well, because not all devices support this media query. So its better to rely on device width (by using media queries as available width will be changed after device is rotated.

 

Related articles

CSS Design: Going to Print

Put Your Content in My Pocket

CSS Tools: Reset CSS

Read more!