The comprehensive list of Internet Explorer's CSS support, broken down by version number. The links to definition for each value is extremely handy.
CSS
Selectivizr
A "JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8."
Chrome, Futura and Garbled Characters
For some reason Chrome on this machine (iMac running 10.6) doesn’t render Futura, which I use for my headlines, replacing it with extended characters. The site renders properly on MacBook Pro, which also runs 10.6. I’ve double-checked the character encoding and verified that removing Futura from the style sheet repairs the problem.
I’m digging in further, but if anyone out there knows of an explanation, I’d appreciate any help.
Type on the Web – An Evolutionary Shift
For designers and anyone interested in typography on the Web, I highly recommend you check out Web Font Specimen and the A List Apart article “Real Web Type in Real Web Context” that explains it. As we near a point where real typographic controls and options are available to us, its pivotal time for professionals to step up and gain (or remember) skills that haven’t been of use on the Web. The gap between good and great designs and designers will grow and the differences will be much more apparent at a glance and in the details.
If you haven’t had a chance to play with Typekit or learn about the various font embedding options (see The Potential of Web Typography: and Bulletproof @font-face Syntax) recently layered into browsers, now’s a good time to fatten up a few brain cells.
Reset Your Style
Eric Meyer has updated his reset style sheet, outlining the reasons for his change in the post Resetting Again. The modifications, while small, are logical and affirm how important the Reset sheet has become to Web professionals and amateurs alike. As Eric notes “this is more than just a throwaway development tool. It really is the beginning of a baseline style sheet. (Or can be.) Things like boldfacing and italics are some of the most obvious textual effects readers will see, and to have reset styles that treat them inconsistently across browsers doesn’t make sense.”
I use a variant of the reset style sheet in every site I build; the majority of those variants are now accounted for, making my life a bit easier. As always, Eric helps our profession move forward in a realistic way that is accessible to developers of all skill levels.
Style Evolution – Dynamic CSS Part 2
Please note that this assumes you have read Part One of the series.
Also, I have taken to calling this Evolved CSS, as the word “dynamic” is a bit too close to the old days of DHTML (Dynamic HTML) for my liking. Let’s jump right in shall we?
Files
Download this zip file if you would like to see a running example of this project and/or have a foundation for your experimentation.
Reduce Server Calls Without Sacrificing Ease of Maintenance and Organization
Web Developers follow many practices in their organization of style sheets. Some put everything in a single document, while others create separate style sheets for each of their major page types or templates. In addition, most seasoned professionals make use of a style sheet that resets all the browser rules (see Eric Meyer’s version) to make life easier.
And..?
Well, if you’re in the practice of using multiple style sheets, your sites may be taking longer to render than they need to, no matter how compressed your CSS may be. This is due to the fact that the browser needs to communicate with the server to snag each individual document, and most browsers only allow a few connections at a time. As noted on the Yahoo UI Blog, a lot of performance issues are directly related to front-end engineering. That’s actually a big win for those of us on the front-end as we don’t have to shell out for better servers or faster pipes. We can simply improve our code to make life easier for our users.
Their four-part article on reducing HTTP requests is lengthy, and may contain more details than you you’ll care about, so to break it down, here’s the key point in regards to this write-up: “Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.” In the context of Evolved CSS, we can make a large impact by using PHP/ASP/JSP et al to take all of our style sheets and combine them into a single document.
The code
For this example, let’s assume your site has the following set up:
- reset.css – Resets all styles to eliminate browser inconsistencies
- core.php – Includes the global layout rules (navigation, header, content area etc.) and text formatting
- scheme.php – The colors and images used for your site, this could easily be a script that provides the end-user the ability to choose their own colors.
- home.css – Home-page specific layout/formatting rules.
- archive.css – Layout and formatting rules for your archive pages.
- gallery.css – The rules used to display your photo gallery.
- print.css – Defines the layout for the page when it is sent to a printer.
You may have noticed the combination of PHP and CSS for those file types – you can easily use either as Part One demonstrated, but keep in mind that you should use flat CSS files over PHP where you are able to reduce the time required to process and render the final style sheet.
Section-Specific vs. the Kitchen Sink
Evolved CSS works well with the practice of using a single global style sheet to define your general layout and styles and section-specific style sheets to serve up rules that are unique to different areas of your site, as you can pass parameters to your main style sheet in order to define which style sheets to include. The Browser will still cache it. Here’s an example of how you could pass these parameters, in this case pulling in the styles for your gallery and a blue color scheme.
<link href="/css/style.php?include=gallery,blue-scheme" rel="stylesheet"
type="text/css" media="screen" />
The file styles.php includes this code to take those parameters and pull in the appropriate style sheets:
/* -=-=-= Import Styles =-=-=- */
// Grab the parameters clean them up and add them to an array
$cssToInclude = split(',', makeSafe($_GET['include']));
/* -=-=-= Core Styles =-=-=- */
// Core will be included every time
include_once 'core.php';
/* -=-=-= Additional Styles =-=-=- */
// Check the array to determine which style sheets to include
if (in_array('home', $cssToInclude)) {
include_once 'home.css';
}
if (in_array('gallery', $cssToInclude)) {
include_once 'gallery.css';
}
if (in_array('archive', $cssToInclude)) {
include_once 'archive.css';
}
That’s all You Need to Start
Well, this is a pretty short example, but I think it gets the poitn across and sheds some light on the possibilities available to you when you harness the power of server-side scripting languages to serve your CSS.
Note: This code is for example purposes only – it could be a lot cleaner, but at this point I am keeping it simple for explanation’s sake. I’m including the function makeSafe()
to clean up the parameters. You can see the code in styles.php, contained in the source file package, if you are curious about it.
A Word on Media Types
This practice can only be used style sheets of the same media type – do not merge your screen style sheets with your print styles or you will get all sorts of ugliness.
What about priority and inheritance?
That’s a damn fine question! At this point, this structure works exactly the same as using multiple style sheets does. Most browsers will use the last rule defined, but you shouldn’t rely on that. As a good developer you should know where your conflicts may be and resolve them intelligently. The !important declaration can be used where needed to resolve specific conflicts.
Conclusion
Well, that about wraps it up for today kids, thanks for reading! Please leave your comments, suggestions and/or questions as I would love to expand the discussion. Also, I would love to hear your thoughts on what I should address next.
Future Evolved CSS Topics
- Let the server do the math – auto-generating widths for your grid
- Using Evolved CSS to improve debugging
- CSS Compression