Natalie Downe gave a talk at BarCamp London on CSS Systems as a wait to maintain your style. She goes into details on how she goes about setting up her CSS on a project:
A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site’s individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code.
We keep our IE related styling right below the common (standards-based) declarations. BUT, we DON’T use hacks. Underscore hacks, * hacks, and all of those things that we all gave up with the birth of IE7 should remain dead and buried. Instead, we’re going to use IE’s conditional commenting to create IE specific CSS selectors. We do this by adding a conditional comment block as the outer most wrapper in our html template (ie. the first tag inside the
Now, in this sample, we do have support for older legacy versions of IE, so you could always reduce the number of conditions if your project doesn’t need this level of support. And, you could also easily extend it to include IE8, or to do minus versioning such as IE8-.
With this conditional block in place, it becomes quite easy to place IE only style declarations right below their standards-based counterparts. As an example:
-moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 pixels */
-moz-transform: translate(30px); /* Move down and right 30 pixels */
-moz-transform: translate(50%, 50%); /* Move down and right by 50% of the size of the element. */
This function simply moves elements around by the specified offset. For example, a text element with -moz-transform: translate(100px); will appear 100 pixels downward and to the right of where it normally would have been displayed. Of course, there are more functions than just translate. For example, there’s rotate, which lets you rotate an element by a specified number of degrees; scale, which scales elements by arbitrary dimensions along each axis; skew, which performs skews along the X and Y axes; and matrix, for arbitrary matrix transformations. There are also simple versions of these like skewx and scaley which allow for simpler syntax in some cases.
It will be interesting to see what uses developers find for CSS transforms. Much of the functionality once reserved for plugins can now be directly integrated into CSS and Javascript, which hopefully will help web developers create more graphically exciting pages. We also look forward to rapid standardization of this property now that there are two implementations.
You have the little chap running as the actual src of the image, the animated background as the img background, and then the sky background applied to the div.
Interestingly, do a view source on this bad boy to see nice corners that uses SVG, VML, -*-border-radius, depending on the browser. A lot of code for one feature huh?
If you’ve been following the Gecko 1.9.1 development since it started then you’re probably already aware of, and possibly already taking advantage of, these CSS properties that I implemented but haven’t talked about yet (this web-tech blog really is a great idea!). They are in Alpha 1, but for maximum stability regarding them you should wait until Alpha 2 comes very shortly. I am, of course, talking about CSS3 text-shadow, box-shadow and column-rule.
(I would’ve liked to include an example in this post, but Wordpress doesn’t seem to like “strange” CSS properties)
Text shadows were in CSS2, but were dropped in CSS2.1 due to lack of implementations; but it’s slowly making a comeback! That’s why the -moz prefix is not necessary for text-shadow, but is needed for the other two (-moz-box-shadow and -moz-column-rule). To see some very creative uses of this property check out this web page. Another cool thing is that this property plays nicely with the “contenteditable” attribute, so you can make a text editor with flickering flames behind your text. Who said Silverlight was needed for pretty RIA’s?
Box shadow is really nice, you can apply a shadow to almost any arbitrary element in your web page, thus easily giving your web app an extra bit of beauty. We also support the multiple shadows feature for both text and box shadows. Column rule allows you to draw lines between the gaps that separate columns if you are using CSS3 columns. It takes exactly the same syntax as a border side (border-top, etc), and pretty much completes our support for CSS3 columns functionality-wise.
This post comes on the back of CSS word wrap support (e.g. word-wrap: break-word;), CSS 2.1 generated content (e.g. tr::before { display:table-cell; content:"First cell"; }), and more.
In March 2004, Dave Shea wrote about CSS Sprites, and now he is back with CSS Sprites 2. He walks us through using JavaScript to make this all work nicely, and picks jQuery to get 'er done:
After putting this together piece by piece, we end up with:
You can use a single CSS attribute to reference whichever is supported on the currently browser and gracefully degrade on browsers that don't support either technology:
Check out the sample and pull up a print preview. He details the good, bad, and ugly:
The Good
The first step to getting a printable watermark is to use an inline tag, rather than background-images. In most browsers, background-images won’t be printed unless the user selects an additional browser option to enable it.
From here, we need to place the watermark image so that it is repeated on each page. It looks like the W3C thought of this ahead of time in the positioning module. The position property’s fixed value should ensure that a watermark is printed on each page. Some browsers, like FireFox and Internet Explorer 7, apply this rule correctly.
The Bad
Not all browsers play nicely with position:fixed and we haven’t yet considered using z-indexing to ensure the watermark displays behind all the regular page content. For IE and FireFox 3+, simply applying z-index:-1 to the watermark will do the trick.
Though, it turns out that earlier versions of FireFox (and other Gecko-based browsers) don’t play nicely with negative z-indexing. So, my current approach uses a few Gecko-specific hacks to degrade the watermark approach for FireFox 2. For FireFox 2, the watermark will display over the content, but still display on every page. Unfortunately, this means the CSS for my approach doesn’t validate.
The Ugly
But of course, position:fixed isn’t supported at all in IE6; it appears to ignore the rule altogether and display the image inline. So, I use conditional comments to filter just a *few* IE6-specific hacks:
Absolute positioning and an additional 100% height on the watermark and printable content are the keys to getting this working for IE6:
This is a new selector engine that I'm working on.
It's a work in progress! Not ready for use yet!
It's definitely not ready yet (got some minor outlier bugs in the standards-compliant browsers - and a bunch of major bugs in IE still left to tackle) but the results are already promising.
4x faster in Firefox 3, 3x faster in Opera 9, 1.5x faster in Safari 3 than the other major JavaScript libraries. It's completely standalone (no library dependencies) and clocks in at under 4kb.
I'm just committing my code before moving on to work on IE - so beware. And yes, I expect this engine to become the new default selector engine in jQuery.
Let’s get one question out of the way, the question "which one is right for you?" Answer… none of the above. It’s like templates. There’s nothing wrong with templates but you don’t put together your client’s site based on a template, right? They can be a good starting point for ideas but you do your own designs. If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.
Eric put together a grid of features and which frameworks support those features. Every framework does reset, colours, and fonts. The fact that every framework has a reset is evidence of the frustration we all feel with the inconsistencies between browsers. The rules for colour tend to be much more minimal. Font styling, on the other hand, is more fully-featured generally. Whereas the colour might just be set for the body element, font sizes and faces are specified throughout. Usually that font face is Helvetica. Most frameworks steer away from trying to style form elements. Almost all of them do layout, usually combinations of columns. Four of the nine frameworks included print styles. Three of the nine included hacks.
After using a framework on Google Code, I can definitely say that they add a lot, and can take some of the pain of out CSS.
