Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Before we move on to a closure examination of CSS3 and some of its modules, I want to take a moment to discuss vendor prefixes and how they will affect the code we will need to write for CSS3. Vendor prefixes allow browser manufacturers to add support for proprietary or developmental features without causing conflicts with later standardized properties. If you've looked at any CSS3 code, you've probably have seen some of these prefixes. And typically they start with the dash, include the browser manufacturer followed by another dash, and then the property they are supporting.
Here is a list of some of the more common vendor prefixes. Microsoft, Mozilla, Opera, Konqueror, and WebKit. So why do we need these prefixes anyway? Well, sometimes people lose sight of the fact that CSS3 is still a work in progress. In fact, many of its features are still being standardized and refined, even as they're being initially implemented in devices and browsers. Now essentially, this means that current browsers offer support for features that may see significant changes to both the standard and the implementation method itself.
Now this early adoption method is good for us as designers as we get to start using new features before they're even standardized. However, it also creates a very dangerous situation where the same code could behave differently between browsers or even between later versions of the same browser, based on changes made over the course of the standardization. Now to illustrate this, I give you Internet Explorer 5 and the box model. Now when IE5 was released, the CSS 2.1 specification regarding the box model wasn't formalized.
Now rather than adopt the proposed definition of the box model, IE5 went ahead and shipped using the older and non- standard method of defining element widths and heights. The resulting mess tortured designers for years and the box model hack became a poster child for web standards proponents. Now this is were vendor prefixes can really help. If browser manufacturers want to support a feature that isn't finalized yet, let's say border radius, they can experiment with implementations by supporting the features with a vendor prefix added to it.
Once implementations have been solidified or the property specification is finished, this prefix can be dropped. This will keep older code from failing if the implementation of the property changes between now and then. In this manner, browser manufacturers get to experiment with how-to-support features without having future code break in older versions of their browsers. For designers, we get to play around with these new and perhaps unfinished features with the full knowledge that using them is experimental and subject to change.
Now as cool as that is, the process is not without its headaches for designers. Let me give you an example. If I wanted to add a border radius to a div tag, this is how I would do it following the standard. That's pretty simple. But since the standard isn't finished, most browser manufacturers support border radius through the use of a prefix, and here's what that looks like. And here I'm adding vendor prefixes to make sure it works in Gecko and WebKit-based browsers.
Note that I'm including the standard syntax last to make sure its value is used by supporting devices. That's not too I guess but what if I wanted to use asymmetrical corners? Vendor specific markup results in this, and that's with out adding specific markup for Opera or Konqueror browsers. As you can tell, that is a mess. So while these prefixes allow us to use properties before they're finalized, it also results in a fair amount of additional code.
Be careful, however. Browser implementation changes rapidly and you need to be aware if the library updates, or if it doesn't update, based on those changes. Another handy site is the CSS3 Generator. This page allows you to choose a property, set a value, and then presents you with the code required to achieve cross-browser usage. Again, it's your job to make sure the code is current and works properly across multiple browsers. One more thing. We'll be using vendor prefixes throughout this title.
I want to remind you that the prefixes and the need for them is constantly changing. What works at the time of this recording isn't necessarily what will work months from now. Before writing your code, take a moment to check out the latest build of browsers and see if the need for vendor prefixes or the syntax involved has changed.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.