Below is a grab bag of links brought to my attention from CSS developers in the trenches. Speaking of the trenches, if you're serious about debugging CSS, you need to install the Firebug plug-in for Firefox and IE's Developer Toolbar.
CSS hacks and IE 7: Time to clean up those old star html hacks? You may find this article very useful.
Stop developing for Internet Explorer 6?: "Robert's talk" says enough is enough. It's time for IE 6 to exit the scene... with a little help from the Web development community.
Simple clearing of floats: John Kim sent me a link to Alex Walker's article summarizing four simple ways to keep an inner div from overflowing an outer div container.
One company says: A web-based apps company blogs to its users that it's dropping IE6 support -- is this the start of a trend?
A Cascading Style Sheets (CSS) framework expedites and simplifies the design and development of Web pages. Moreover, a CSS framework produces more standardized results in all browsers. Here's a look at two CSS frameworks, each with a unique philosophy.
Not blessed with total recall or a photographic memory? The following quick reference pages or "cheat sheets" can make live easier for CSS developers. Print them out and post them next to your computer.
CSS Cheat Sheet (V2): This one-page cheat sheet lists all CSS selectors and properties (as of CSS 2.1) . It includes a visual example of the box model.
Cascading Style Cheatsheet: This cheat sheet is a quick reference to basic CSS concepts and commonly used styles.
CSS Shorthand Cheat Sheet: This cheat sheet concentrates on the shorthand coding for common CSS elements.
CSS2 Reference (W3Schools): A comprehensive on-line reference for CSS properties. Also shows browser compliance. Printer-friendly version is available.
Tutorials for CSS developers of all ages. These online tutorials are a great way to continue building your skills and learning how to design and build web interfaces using cascading style sheets.
Introduction to CSS (W3Schools): A soup to nuts tutorial on CSS concepts with plenty of examples and an editor that allows you to input values and see immediate results.
The CSS tutorial: A step-by-step CSS tutorial authored by Stefan Mischook.
Complete CSS Guide: Take advantage of the free portion of this extensive resource on CSS.
CSS Beginner Tutorial: This tutorial, for CSS beginners, is followed by intermediate and advanced CSS lessons.
CSS Tutorials: A collection of short tutorials on a wide variety of CSS topics. Hosted by SitePoint.
Floatutorial: Floatutorial takes you through the basics of floating elements such as images, buttons, inline lists and multi-column layouts.
So we admit that playing around with style sheets is a lot more fun than testing them, but thoroughly testing your creations is still the best way to avoid a lot of post-production headaches and heartburn.
Maxthon browser: If you have users in Asia, you may want to test your Web pages using what's reported to be the second most popular browser in China.
Browser Statistics from w3Schools: Technical audiences, as this site shows, use a wider range of browsers than non-technical audiences. We're seeing the same usage trends.
Browser News: Chuck Upsdell's web site is a great resource for timely news on browser releases, updates, and fixes. Also provides valuable browser-detection info.
Google Chrome: Google's attempt to reinvent the web browser.
Usage share of web browsers: Unless you run an intranet web site with browser restrictions, it's good to keep an eye on browser usage. Your own stats may reveal more details.
Margin and padding can be expressed using four individual properties or with a single shorthand property. The shorthand property "margin: 10px 5px 5px 20px;" represents a margin-top of 10px, a margin-right of 5px, a margin-bottom of 5px, and a margin-left of 20px. The trick is remembering the correct order for the values in the shorthand property: top, right, bottom, and left. One way to remember the order is to associate it with the movement of an analog clock; the hands move clockwise around the face (top, right, bottom, left). A second tip (from the book, CSS: The Missing Manual) is to remember the expression: "Stay out of TRouBLe."
Check out these CSS-related articles and tutorials on developerWorks.
Explore multithreaded programming in XUL: As you create cross-platform desktop applications using XUL, you also can enhance your skills with JavaScript, CSS, and even HTML...
Advanced jQuery: jQuery makes writing a good JavaScript-based Web application easy and straightforward, but there are a few extra steps required...
Ouch! I just got bit by the IE "duplicate characters bug," but found an excellent "IE Exposed" section on the Position is Everything web site that helped me figure it out. (Hint: Multiple comments before a div tag can confuse IE 6). This page also documents newer problems in IE 7 and IE 8 -- have you heard of th IE8 "noscript-ghost bug"? Me neither.
Some of us still like to curl up with a good CSS book. One book our team has used extensively is "CSS: The Missing Manual," by David S. McFarland. McFarland's book is great for beginners but it also contains all those IE hacks we love so much.
CSS: The Missing Manual: Link to McFarland's book on Amazon. Nearly ninety reviews | 5 stars.
Blogs, musings, and conversations on CSS-related topics.
Blog: Kilian Valkhof: Valkhof is a "front-end developer and user-experience designer" from the Netherlands
The Future of Style: Hosted by the W3C CSS Working Group, The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets
The W3C is the official source for the latest CSS standard (recommendation) and the proving ground for future CSS development.
CSS 2.1 Specification: This W3C Candidate Recommendation (19 July 2007) is the most widely supported version of CSS.
CSS 3 Specification: CSS level 3 is under development. It extends CSS 2.1 with new selectors, fancy borders & backgrounds, vertical text, user interaction, speech and more
Cascading Style Sheets: Wikipedia page that provides some background and history on the evolution of CSS standards.
Description: Cascading Style Sheets are a tool for efficiently controlling the layout and design of Web pages and web-based interfaces. CSS Digest is a collection of selected links about Cascading Style Sheets and their usage.
Objective: Our goal is to provide Web designers with current pointers to useful CSS resources, including quick references, tutorials, hacks, tips, news, and standards.
As a member of this group space, your screen name will appear in the members list, you'll have access to the space's message board (if applicable), and you may receive e-mails pertinent to the space.
Before applying for membership to this space, please make sure you're logged in to developerWorks.
Log in or register now.
We'll be in touch after we've reviewed your request. Thanks for your interest in developerWorks spaces!
Description: Cascading Style Sheets are a tool for efficiently controlling the layout and design of Web pages and web-based interfaces. CSS Digest is a collection of selected links about Cascading Style Sheets and their usage. Our goal is to provide Web designers with current pointers to useful CSS resources, including quick references, tutorials, hacks, tips, news, and standards.
Objective: Our goal is to provide Web designers with current pointers to useful CSS resources, including quick references, tutorials, hacks, tips, news, and standards.
As a member of this group space, your screen name will appear in the members list, you'll have access to the space's message board (if applicable), and you may receive e-mails pertinent to the space.
Before applying for membership to this space, please make sure you're logged in to developerWorks.
Log in or register now.
We'll be in touch after we've reviewed your request. Thanks for your interest in developerWorks spaces!
Show member list
