Extensible Hypertext Markup (XML) has changed the web as we knew it and helped to make websites rich, well designed and fast loading. It’s become an integral part of Web 2.0 that won’t be going away any time soon. So what’s next for CSS? Mozilla and the Opera Software company give us some clues as to what features from the new CSS3 markup that may be incorporated into the next generation of web browsers. Here are some highlights…
Firefox CSS3 Highlights
- Support for the inline-block (CSS 2.1) and inline-table (CSS 2.0) values of the display property
- font-size-adjust is a property in CSS 2.0 (which was dropped from CSS 2.1 due to lack of implementations). Think of it as a way to a way for style sheets to pick font size by the size of the x-height rather than the size of the font.
Anyway, why would you want to use this? Largely because, on the Web, you don’t actually know what font is going to be used. Different machines, especially when running different operating systems, have different fonts on them. Even the same font might be used slightly differently on different operating systems. The lowercase letters in different fonts take up a different proportion of the font’s size. How big text appears and how much width it takes up is often more closely related to the size of the lowercase letters than the uppercase.
- rgba() and hsla() colors will allow for easier control over transparencies and color separation
- New values for the width, min-width, and max-width properties: -moz-max-content, -moz-min-content, -moz-fit-content, and -moz-available. This value lets authors do some things that previously weren’t possible without tables, such as putting backgrounds on headings that won’t fill the whole width of the container unless the heading does, but is a single rectangle if the heading breaks to multiple lines.
- white-space: pre-wrap will allow for the displaying of preformatted text in a way that wraps when the text doesn’t fit in the width of its container. This can be useful for things like source code samples and mailing list archives.
Opera CSS3 Highlights
- Media queries are a CSS 3 construct, which work in a similar manner to conditional comments, except that these are web standards, rather than proprietary constructs—you can enclose a block of CSS rules inside a media query, and then have them applied to your markup (or not) depending on a condition, such as “is the screen size less than 480 pixels”?
- text-shadow Using drop shadows with text used to mean serving the text as an image, and messing about the positioning, but that’s no longer the case. In the text-shadow property, the values from left to right set the color of the shadow, the left/right and top/bottom offsets of the shadow (negative values move the shadow left/up, and positive values move the shadow right/down), and the amount of blurring for the shadow.
- -o-background-size allows for the dynamic or conditional control of background images.
- HSL. CSS 3 allows you to specify colours as HSL (or Hue, Saturation, Lightness) values—this is good, HSL colors overcome some of the limitations of RGB colors.