Firefox 3.5
Firefox 3.5 looks to have plenty of new features for web developers to play with. I'll go over some of new CSS features that are new to 3.5.
For much of my web career I've been an Internet Explorer stooge but when Firefox 3 came out last summer, I made the switch and never looked back. Firefox is just so heavily oriented to web developers and designers that it's hard to rationalize using any other browser. Sure, Opera and Safari have slightly better support but their lack of developer tools make me opt for Firefox.
Firefox 3.5, the latest version of the browser is set to be released this Tuesday. This intermediary release is probably aimed more at developers than end users and that's what excites me the most. After reviewing the 3.5 release notes I thought I'd point out a few of the new features that I'm most excited about.
@font-face Support
Since the inception of the web, we've been limited to about a dozen font types. With @font-face we're now able to choose from 1000's if not more. By embedding fonts our sites will be more accessible to people with screen readers, and it will also improve our search engine optimization by using pure text rather than images. This will also make our lives easier because we'll be able to change font properties via CSS rather than having to open up Photoshop or Fireworks to edit an image file.
Currently browsers using Webkit also support @font-face and Opera 10 will support it. Internet Explorer has it's own proprietary method.
@font-face
{
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
Box Shadow & Text Shadow
A personal favorite of mine is the box-shadow property. Creating drop shadows on the web can be pretty painful, especially when the size of the box may vary from page to page. With the new box shadow property we won't need to worry about that anymore. Safari also supports box-shadow while Opera and IE do not. Firefox 3.5 will also support text-shadow (with no -mox prefix). This means that Opera, Safari and Firefox all support this while IE, again has it's own proprietary method.
div { -moz-box-shadow: #000 10px 5px 5px; }
h2 { text-shadow: #000 1px 1px 2px; }
CSS Transformations
Originally introduced by Safari/Webkit we now have the ability to use CSS Transformations. I haven't delved into this much but I have used CSS Transitions a few times on various projects which I wish they would have implemented instead.
New CSS Selectors
Probably the most important aspect of CSS is the ability to select elements. Firefox 3.5 gives us a few more tools to achieve this. Having used JQuery extensively for the past several months, I've found myself using almost all of these to circumvent browser's lack of support. With Firefox 3.5 we'll be able to natively use these selectors (and more):
/* Zebra Stripes */
tr:nth-child(odd) { background: #fff; }
tr:nth-child(even) { background: #eee }
/* Alternate Method for Zebra Stripes */
tr:nth-of-type(odd) { background: #fff; }
tr:nth-of-type(even) { background: #eee }
/* Last 5 LIs of a List */
li:nth-last-child(-n+5) { color: #ccc; }
/* Alternate Method */
li:nth-last-of-type(5) { color: #ccc; }
CSS Media Queries
Media queries allows web developers to target certain scenarios that end users may have. For instance in the example below I'm adjusting the width of my #content DIV if the end user is on a PDA and has a screen size smaller than 300px.
@media handheld and (max-width: 300px)
{
#content { width: 300px; }
}
You could also take this a step further and mine for information about your end users by testing the size of elements on your page:
<style type="text/css">
@media handheld and (max-width: 300px)
{
#content { width: 300px; }
}
</style>
<script type="text/javascript">
if ($(#content).width() = "300px")
{
//do something, i.e. email, write to text file etc.
}
</script>
Other New CSS Features
Here's a list of a few other CSS features I didn't mention above.
- opacity (no longer -moz-opacity)
- word-wrap
- -moz-border-image
- -moz-column-rule
- -moz-column-rule-width
- -moz-column-rule-style
- -moz-column-rule-color
