Alternate Sytlesheet per width

P

PapaGeek

New Member
I have been working on a JavaScript that will select alternate style sheet based on the width of a webpage. I sort of remember seeing somewhere on a forum that the new specs for CSS will be enabling this feature, but I don't remember where I saw it or if the source seemed to be valid.

Does anyone know if this is in the new specs? Where can I get some information of how this is being done so I can make sure my script is compatible.

Thanks

Papa Geek
 
P

PapaGeek

New Member
The problem I'm trying to deal with applies to more than just full screen display.

Starting with explorer 7 or 8 there is a zoom tool at the bottom of the browser window. With two clicks you can change your zoom to 150%. A visitor with a 1280 x 1024 screen viewing at 150% actually has a browser window of 853 x 682.

Display screens come in all shapes and sizes. A one size fits all page just won't work anymore. Most designers are young and do not consider the baby boomers who are now in their 60's wearing bi-focal lenses. This is a large customer base who buy a lot of items for their grandchildren and probably browse the net with lower resolutions and zoomed displays to make things easier to read. When you give them a page designed for wider windows and force them to scroll sideways, you lose customers.

What if the webpage itself could sense the width of the visitor's window, then select the appropriate CSS file that would rearrange the page elements to make them fit horizontally in the space available. That is the script I am trying to create.
 
Last edited:
P

PapaGeek

New Member
I think I just found my own answer! It is the media queries W3C Candidate Recommendation.

http://www.w3.org/TR/css3-mediaqueries/

If I understand it correctly, you can change your CSS links to work only on specific page widths.

Change:
<link media='screen' href='vsb5.css' type='text/css' rel='stylesheet' />
To:
<link media='screen and (min-width: 400px) and (max-width: 700px)' href='vsb5.css' type='text/css' rel='stylesheet' />

My only concern is that all of the media references are rel='stylesheet' links. What if the browser you are working on does not support this feature. All of the stylesheets would be active at one time.

I'm sticking to my script writing. You define one as a stylesheet and the rest as alternate stylesheets. The script changes the definition internally based on the page width. Only one sheet at a time will be active. and If the browser does not support the script it will default to the single sheet that you decide on.
 
You must log in or register to reply here.
Top