Bibliographic Information
Responsive Web Design with HTML5 and CSS3
By: Ben Frain;
Publisher: Packt Publishing
Pub. Date: April 10, 2012
Print ISBN-13: 978-1-84969-318-9
Adding accessibility to your site with WAI-ARIA
The aim of WAI-ARIA is principally to solve the problem of making dynamic content on a page accessible. It provides a means of describing roles, states, and properties for custom widgets (dynamic sections in web applications) so that they are recognizable and usable by assistive technology users.
For example, if an onscreen widget displays a constantly updating stock price, how would a blind user accessing the page know that? WAI-ARIA attempts to solve this problem. Fully implementing ARIA is outside the scope of this book (for full information, head over to http://www.w3.org/WAI/intro/aria). However, there are some very easy to implement parts of ARIA that we can adopt to enhance any site written in HTML5 for users of assistive technologies.
If you're tasked with building a website for a client, there often isn't any time/money set aside for adding accessibility support beyond the basics (sadly, it's often given no thought at all). However, we can use ARIA's landmark roles to fix some of the glaring shortfalls in HTML's semantics and allow screen readers that support WAI-ARIA to switch between different screen regions easily.
ARIA's landmark roles
Implementing ARIA's landmark roles isn't specific to a responsive web design. However, as it's relatively simple to add partial support (that also validates as HTML5 with no further effort), there seems little point in leaving it out of any web page you write in HTML5 from this day onwards. Enough talk! Now let's see how it works.
Consider our new HTML5 navigation area:
We can make this area easy for a WAI-ARIA capable screen reader to jump to by adding a landmark role attribute to it, as shown in the following code snippet:
How easy is that? There are landmark roles for the following parts of a document's structure:
-
application: This role is used to specify a region used for a web application.
-
banner: This role is used to specify a sitewide (rather than document specific) area. The header and logo of a site, for example.
-
complementary: This role is used to specify an area complementary to the main section of a page. In our And the winner isn't... site, the UNSUNG HEROES and OVERHYPED NONSENSE areas would be considered complementary.
-
contentinfo: This role should be used for information about the main content. For example, to display copyright information at the footer of a page.
-
form: You guessed it, a form! However, note that if the form in question is a search form, use the search role, instead.
-
main: This role is used to specify the main content of the page.
-
navigation: This role is used to specify navigation links for the current document or related documents.
-
search: This role is used to define an area that performs a search.
Taking ARIA further
ARIA isn't limited to landmark roles only. To take things further, a full list of the roles and a succinct description of their usage suitability is available at http://www.w3.org/TR/wai-aria/roles#role_definitions
Let's skip ahead and extend our current HTML5 version of the And the winner isn't... markup with the relevant ARIA landmark roles:
And the winner isn't...
Every year when I watch the Oscars I'm annoyed...
that films like King Kong, Moulin Rouge and Munich get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?
We're here to put things right.
Unsung heroes...
Overhyped nonsense...
Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That's a fact. Deal with it.
Test your designs for free with NonVisual Desktop Access (NVDA)
If you develop on the Windows platform and you'd like to test your ARIA enhanced designs on a screen reader, you can do so for free with NVDA. You can get it at the following URL:
Hopefully, this brief introduction to WAI-ARIA has demonstrated how easy it is to add partial support for those using assistive technology and you'll consider enhancing your next HTML5 project with it.
Styling ARIA roles
Like any attributes, it's possible to style them directly using the attribute selector. For example, you can add a CSS rule to the navigation role using nav[role="navigation"] {}.
What CSS3 offers the frontend developer
In the past, we either gambled that users would put up with long load times for the sake of a great design (they wouldn't, by the way!) or we ditched images, often compromising our design ideals, for the sake of usability. CSS3, in many ways negates the need for compromise. With just a few lines of code (and no images!) CSS3 can produce onscreen elements such as rounded corners, background gradients, text shadows, box shadows, custom typography, and multiple background images (alright, granted, that one does require images). If that wasn't enough, much of the basic interaction for which we have previously relied on JavaScript, such as hover state animations, can also be handled with pure CSS3. There are heaps of CSS3 goodies and economies that will elevate our responsive design from merely "a normal website made responsive" to a responsive website built for the future. By utilizing CSS3, we will enable our responsive design to load faster, require less resource and be far easier to maintain and amend in the future. Before we get into that, let's deal with the "Elephant in the room".
CSS3 support in Internet Explorer versions 6 to 8
With a few exceptions (such as @font-face), few features of the new CSS3 modules are supported by Old IE (Internet Explorer versions 6, 7, and 8). Should you use CSS3 in your design? As ever in web development, the answer is "it depends".
Personally, at present, I principally use CSS3 to enhance a site, rather than provide essential functionality. I'm entirely comfortable with elements looking a little different in different browsers. I believe you and your clients should be too. You might find it helpful to refer back to the Educating our clients that websites shouldn't look the same in all browsers section in Chapter 1, Getting Started with HTML5, CSS3, and Responsive Web Design. Which parts of a design are critical to it "working" or "looking right" is subjective. But it's worth knowing that there are many polyfills available for adding CSS3 functionality to Old IE. Applying such polyfills, should you choose to follow that path, is discussed more in Chapter 9,Solving Cross-browser Responsive Challenges.
For a full list of what CSS 2.1 and CSS3 features are supported in the differing versions of Internet Explorer, head over to the following URL:
Using CSS3 to design and develop pages in the browser
I can't speak for you but I find re-making images tiresome. You know the kind of comment I'm talking about, "Could we make those corners a little rounder?" or "Can the gradient be a little darker at the top?" Once we've dutifully made the amends, we often hear the inevitable, "Oh, no, it was better the way it was. Can you swap it back?" Now, of course, this to-and-fro process is necessary; after all, we often want to tweak a design just to see how it looks. However, CSS3 lets you do much of this in mere seconds, within the code, rather than minutes within the graphics editor.
Vendor prefixes and how to use them
As the CSS3 Modules specifications have yet to be either ratified by the W3C or have all their proposed features fully implemented into browsers, browser vendors use what's known as vendor prefixes to test new "experimental" CSS features. Whilst this helps browser makers implement the new CSS3 modules, it makes our lives, as writers of CSS3, just a little more tedious. Consider the following code for a rounded corner in CSS3:
.round{
-khtml-border-radius: 10px; /* Konqueror */
-rim-border-radius: 10px; /* RIM */
-ms-border-radius: 10px; /* Microsoft */
-o-border-radius: 10px; /* Opera */
-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */
-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */
border-radius: 10px; /* W3C */
}
You can see a number of vendor prefixed properties (and that is by no means an exhaustive list), each with their own unique prefix, for example, -webkit- for Webkit based browsers, -ms- is the Microsoft prefix, so covers the Internet Explorer, and so on. Due to the way CSS works, a browser will go line by line down the stylesheet, applying properties that apply to it and ignoring ones that don't.
Furthermore, applicable properties later in the stylesheet take precedence over earlier ones. Thanks to this cascade, we can list our vendor-prefixed properties first and then the correct (but perhaps yet to be implemented) non-prefix version last, safe in the knowledge that when the feature is fully implemented, the correct version will be implemented by the browser, rather than the experimental, browser-specific one listed before it.
Clippings and JavaScript for quick CSS3 prefixes
You may find it handy to keep clippings of common CSS3 rules containing all the necessary vendor prefixed properties. That way you can just paste them in without needing rewrite them all each time. Many code-editing programs (or Integrated Development Environments (IDEs) as they are often labeled) have code clip features and when using CSS3 they can save a lot of time. There's also JavaScript solutions that automatically add prefixes to CSS files, check out "-prefix-free", a great solution, at http://leaverou.github.com/prefixfree/.
It's acceptable to list every vendor prefix version of a property. However, in reality, few people do. Instead they either target the browsers they expect to see most often or check what browsers support the feature before writing the rule. For example, you might just opt to go with:
.round{
-moz-border-radius: 10px; /* Mozilla (e.g Firefox) */
-webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */
border-radius: 10px; /* W3C */
}
That would cover Firefox, Chrome, and Safari, along with any browser that has fully implemented the rule.
I know what you're thinking, isn't listing multiple vendor prefixed versions of the same property going to lead to code bloat? Well, a little yes. But no matter how many prefixed properties we add, it's still a faster, more elegant and robust solution than using images.
Before working on a site, it's wise to look at the current browser usage statistics. In doing so, you'll have a better idea of what browsers you need to build specific support for. For example, if time and budget are tight, you might decide to omit vendor specific prefixes for any browser with less than 3 percent usage rate for your site. As ever, you need to make a judgment based on a number of variables.
Now, we understand what the prefixes are and how to apply them in our rules. Let's look at some quick and useful little CSS3 tricks.
When can I use specific CSS3 and HTML5 features?
As we delve into CSS3 more and more, I can heartily recommend visiting http://caniuse.com, if you ever want to know what the current level of browser support is available for a particular CSS3 or HTML5 feature. Alongside showing browser version support (searchable by feature) it also provides the most recent set of global usage statistics from http://gs.statcounter.com.
New CSS3 selectors and how to use them
CSS3 gives incredible power for selecting elements within a page. You may not think this sounds very glitzy but trust me, it will make your life easier and you'll love CSS3 for it! I'd better qualify that bold claim...
CSS3 attribute selectors
You've perhaps used existing CSS attribute selectors to target rules. For example, consider the following rule:
img[alt] {
border: 3px dashed #e15f5f;
}
This would target any image tags in the markup which have an alt attribute:
You can also narrow things down by specifying what the attribute value is. For example, consider the following rule:
img[alt="atwi_oscar"] {
border: 3px dashed #e15f5f;
}
This would only target images which have an alt attribute of atwi_oscar. So far, so big deal we could do that in CSS2. What is CSS3 bringing to the party? Principally, three new "substring matching" attribute selectors...
CSS3 substring matching attribute selectors
CSS3 lets us select elements based upon the substring of their attribute selector. That sounds complicated. It isn't! We can now select an element, based on the contents of the attribute. The three options are whether the attribute is:
-
Beginning with the prefix
-
Contains an instance of
-
Ends with the suffix
Let's see what they look like.
The "beginning with" substring matching attribute selector
The "beginning with" substring matching attribute selector has the following syntax:
Element[attribute^="value"]
In practical use, if I want to select all images on the site that had an alt attribute that began with film, I would write the following rule:
img[alt^="film"] {
border: 3px dashed #e15f5f;
}
The key character in all this is the ^ symbol which means "begins with".
The "contains an instance of" substring matching attribute selector
The "contains an instance of" substring matching attribute selector has the following syntax:
Element[attribute*="value"]
In practical use, if I want to select all images on the site that had an alt attribute that contained film I would write the following rule:
img[alt*="film"] {
border: 3px dashed #e15f5f;
}
The key character in all this is the * symbol which means "contains".
The "ends with" substring matching attribute selector
The " ends with " substring matching attribute selector has the following syntax:
Element[attribute$="value"]
In practical use, if I want to select all images on the site that had an alt attribute that ended with film I would write the following rule:
img[alt$="film"] {
border: 3px dashed #e15f5f;
}
The key character in all this is the $ symbol which means "ends with".
A practical, real world example
How can these substring attribute selectors actually help? Let me give you an example where I often use CSS3 attribute selectors. If I build a website with a Content Management System (for example, Wordpress, Concrete, or Magento), it often gives the client the ability to add new pages. For example, perhaps they are adding a piece of news about their company or a product update. Each time they add a page in the CMS, the generated HTML will include an ID value for theor other relevant tag, which helps distinguish the page, markup wise, from others. For example, one client was involved in Motorsport and had a "Racing History" section with yearly reports. Eachtag would have an ID for the year:
IDs can start with numbers in HTML5
If you're not used to coding in HTML5, you might assume that an ID beginning with a number is invalid, as it was in HTML 4.01. However, HTML5 removes that restriction, the only things to remember with ID names in HTML5 is that there should be no spaces in the ID name and it must be unique on the page. For more information visit http://dev.w3.org/html5/spec/Overview.html#the-id-attribute.
I needed the navigation bar link for "Racing History" to be highlighted when any of these yearly pages were viewed, as they related to the "Racing History" section. However, rather than write a style rule covering every future year, I was able to write a defensive (they are sometimes referred to as "defensive" rules as they try and safeguard against future events) CSS3 rule:
body[id^="2"] .navHistory { color: #00b4ff; }
This means that any element with a class of .navHistory, that is a descendant of a body with an ID beginning with 2 (for example, 2002, 2003, 2004, and on) will be colored with the hex value of #00b4ff. One simple rule covers all eventualities. Unless of course the website is still in its current form by the year 3000—in which case, chances are, even if I eat and exercise well, I won't be able to continue its upkeep...
CSS3 structural pseudo-classes
The more often you code websites, the more often it's likely you'll need to solve the same problem again and again. Let's consider a typical example. Horizontal navigation bars are often made up of a number of equally spaced
- links. Suppose we need margin to the left and right side of each list item, except for the first and last list item. Historically, we have been able to solve this problem by adding a semantically superfluous classname to the first and last
- elements in the list, as shown in the highlighted lines in the following code snippet:
And then by adding a couple of rules in the CSS, we can amend the margin for those two list items:
li {
margin-left: 5%;
margin-right: 5%;
}
.first {
margin-left: 0px;
}
.last {
margin-right: 0px;
}
This works but isn't flexible. For example, when building a website built on a CMS system, list items for linking new content might be added automatically, so it might not be a simple task to add or remove the last or first class to the correct list item in the markup.
The :last-child selector
CSS2.1 already had a selector applicable for the first item in a list:
li:first-child
However, CSS3 adds a selector that can also match the last:
li:last-child
Using these selectors together, we don't need any additional classes in our markup.
We'll fix up our And the winner isn't... site navigation using this and a combination of the display: table property. The following screenshot shows how things look currently:
Now, let's take a look at the graphic mockup:
The navigation bar links span the full width of the design, which we need to replicate. Our markup for the navigation looks like this:
First, we'll set the nav element to be a table:
nav {
display: table;
/* more code... */
}
Then the
- to be displayed as a table-row:
nav ul {
display: table-row;
/* more code... */
}
And finally the list-items to display as table-cells:
nav ul li {
display: table-cell;
/* more code... */
}
This means that if extra list items are added, they will automatically space themselves accordingly. Finally, we'll use our CSS selectors to align the text to the right and left of the first and last list items:
nav ul li:last-child {
text-align: right;
}
nav ul li:first-child {
text-align: left;
}
Then in the browser, our navigation is approaching our original composite:
Don't worry; these tables are only for display!
You may be wondering what on earth I'm thinking of, to suggest that we use a table for the navigational layout. However, don't forget, these tables are only presentational. That means they exist only in the CSS and are nothing to do with the markup. We are merely telling the browser we want those elements to appear and behave as if they were a table, not actually be a table. Displaying the markup in this manner also doesn't preclude us from using a different layout type for a different viewport, for example, display: inline-block for viewports below 768 px.
The nth-child selectors
But what about those alternate colors shown in the navigation bar links of the original composite? Again, CSS3 has a selector that can solve this problem for us without the need for additional markup:
:nth-child(even)
Let's use this selector to fix the problem and then we can look at some of the many ways that nth-child can solve problems that previously required extra markup. I'll add alternate red links in the navigation bar by adding the following style rule:
nav ul li:nth-child(even) a {
color: #fe0208;
}
And now we have alternate colors in the navigation links:
How about that? Not a line of jQuery in site and no extra markup! What did I tell you? CSS3 selectors are great!
Understanding what nth rules do
Amongst frontend web developers and designers, nothing makes mathematics weaklings tremble quite like the nth-based rules (well, you know, except maybe someone asking you to code a little PHP or give them a hand with some REGEX expressions). Let's see if we can make sense of the beast and gain a little respect from those backend wizards.
When it comes to selecting elements in the tree structure of the DOM (Document Object Model or more simplistically, the elements in a page's markup) CSS3 gives us incredible flexibility with a few nth-based rules—:nth-child(n), :nth-last-child(n), :nth-of-type(n), and :nth-last-of-type(n). We've seen that we can use (odd) or (even) values (as we have to fix our navigation above) but the (n) parameter can be used in another couple of ways:
-
Used as an integer; for example, :nth-child(2)—would select the second item
-
Used as a numeric expression; for example, :nth-child(3n+1)—would start at 1 and then select every third element
The integer based property is easy enough to understand, just enter the element number you want to select. The numeric expression version of the selector is the part that can be a little baffling for mere mortals. Let's break it down. For practicality, within the brackets, I start from the right. So, for example, if I want to figure out what (2n+3) will select, I start at the right (from the third item) and know it will select every second element from that point on. I've amended our navigation rule to illustrate this:
nav ul li:nth-child(2n+3) a {
color: #fe0208;
}
As you can see, the third list item is colored and then every subsequent second one after that (if there were 100 list items, it would continue selecting every second list item):
How about selecting everything from the second item onwards? Well, although you could write :nth-child(1n+2), you don't actually need the first number 1 as unless otherwise stated, n is equal to 1. We can therefore just write :nth-child(n+2). Likewise, if we wanted to select every third element, rather than write :nth-child(3n+3), we can just write :nth-child(3n) as every third item would begin at the third item anyway, without needing to explicitly state it.
The expression can also use negative numbers for example, :nth-child(3n-2) starts at minus 2 and then selects every third item. Here's our navigation amended with the following rule:
nav ul li:nth-child(3n-2) a {
color: #fe0208;
}
And here's what it gives us in the browser:
Hopefully, that's making perfect sense now?
The child and last-child differ in that the last-child variant works from the opposite end of the document tree. For example, :nth-last-child(-n+3) starts at 3 from the end and then selects all the items after it. Here's what that rule gives us in the browser:
Finally, let's consider :nth-last-of-type. Whilst the previous examples count any children regardless of type, :nth-last-of-type let's you be specific about the type of item you want to select. Consider the following markup:
Note that the second list item doesn't have the internal class added to it.
Consider the following rule:
nav ul li.internal:nth-of-type(n+2) a {
color: #fe0208;
}
You can see that we are telling the CSS, "From the second matching item, target every
- item with a class called internal. And here's what we see in the browser:
CSS3 doesn't count like jQuery!
If you're used to using jQuery you'll know that it counts from 0 upwards. For example, if selecting an element in jQuery, an integer value of 1 would actually be the second element. CSS3 however, starts at 1 so that a value of 1 is the first item it matches.
The negation (:not) selector
Another handy selector is the negation pseudo-class selector. This is used to select everything that isn't something else. For example, keeping the same markup as the previous example, if we change our rule as follows:
nav ul li:not(.internal) a {
color: #fe0208;
}
You can see that we are opting to select every list item that doesn't have the internal class . So in the browser, we see this:
So far we have looked primarily at what's known as structural pseudo-classes (full information on this is available at http://www.w3.org/TR/selectors/#structural-pseudos). However, CSS3 has many more selectors. If you're working on a web application, it's worth looking at the full list of UI element states pseudo-classes (http://www.w3.org/TR/selectors/#UIstates), as they can; for example, help you target rules based on whether something is selected or not.
Amendments to pseudo-elements
Pseudo-elements have been around since CSS2 but the CSS3 specification revises the syntax of their use very slightly. To refresh your memory, until now, p:first-line would target the first line in a
tag. Or p:first-letter would target the first letter. Well, CSS3 asks us to separate these pseudo-elements with a double colon to differentiate them from pseudo-classes. Therefore, we should write p::first-letter instead. Note that however Internet Explorer 8 and lower versions don't understand the double colon syntax; they understand only the single colon syntax.
Is :first-line handy for responsive designs?
One thing that you may find particularly handy about the :first-line pseudo-element is that it is specific to the viewport. For example, if we write the following rule:
p::first-line {
color: #ff0cff;
}
As you might expect, the first line is rendered in an awful shade of pink (I was thinking of Moulin Rouge at the time):
However, on a different viewport, it renders a different selection of text:
So, without needing to alter the markup, with a responsive design, there's a handy way of having the first visual (as the browser renders it, not as it appears in the markup) line of text appear differently than the others.
Hopefully this brief foray into CSS3 selectors illustrates how they help keep a responsive design and code base free of additional markup. It the past, I've needed to use a JavaScript library such as jQuery to make complicated selections but CSS3 often negates that need. It's also comforting to know that the CSS3 selectors module is already at the W3C Recommendation status; so it's a very mature module that's unlikely to change much from here on.
New CSS3 color formats and alpha transparency
So far, CSS3 has given us new powers of selection and the ability to add custom typography to our designs. Now, we'll look at ways that CSS3 allows us to work with color that were simply not possible before.
Firstly, CSS3 allows us to use new methods, such as RGB and HSL, for declaring color . In addition, it enables us to use those two methods alongside an alpha channel (RGBA and HSLA respectively).
RGB color
RGB (Red, Green, and Blue) is a coloring system that's been around for decades. It works by defining different values for the red, green, and blue components of a color. For example, the red color used for the odd numbered navigation links on the And the winner isn't... site is currently defined in the CSS as a hex (hexadecimal) value, #fe0208:
nav ul li:nth-child(odd) a {
color: #fe0208;
}
However, with CSS3, it can equally be described as an RGB value:
nav ul li:nth-child(odd) a {
color: rgb(254, 2, 8);
}
Most image editing applications show colors as both hex and RGB values in their color picker. The following screenshot shows the Photoshop color picker, with the R, G, and B boxes showing the values for each channel:
You can see that the R value is 254, the G value is 2 and the B value is 8. Which is easily transferable to the CSS color property value. In the CSS, after defining the color mode (for example, rgb) the values for red, green and blue colors are comma separated in that order within parenthesis.
HSL color
Besides RGB, CSS3 also allows us to declare color values as HSL (Hue, Saturation, and Lightness).
HSL isn't the same as HSB!
Don't make the mistake of thinking that the HSB (Hue, Saturation, and Brightness) value shown in the color picker of image editing applications such as Photoshop is the same as HSL—it isn't!
What makes HSL such a joy to use is that it's relatively simple to understand the color that will be represented based on the values given. For example, unless you're some sort of color picking Ninja, I'd wager you couldn't instantly tell me what color rgb(255, 51, 204) is? Any takers? No, me neither. However, show me the HSL value of hsl(315, 100%, 60%) and I could take a guess that it is somewhere between Magenta and Red color (it's actually a festive pink color—perhaps I'm starting to like Moulin Rouge after all). How do I know this? Simple...
HSL works on a 360° color wheel. The first figure in a HSL color, represents Hue, and has Yellow at 60°, Green at 120°, Cyan at 180°, Blue at 240°, Magenta at 300° and finally Red at 360°. So as the aforementioned HSL color had a hue of 315, it's easy to know that it will be between Magenta (at 300°) and Red (at 360°). The following two values for saturation and lightness, specified as percentages, merely alter the base hue. For a more saturated or colorful appearance, use a higher percentage in the second value. The final value, controlling the lightness, can vary between 0 percent for black and 100 percent for white.
So, once you've defined a color as an HSL value, it's also easy to create variations on it, merely by altering the saturation and lightness percentages. For example, our red navigation links can be defined in HSL values as follows:
nav ul li:nth-child(odd) a {
color: hsl(359, 99%, 50%);
}
If we wanted to make a slightly darker color on hover, we could use the same HSL value and merely alter the lightness (the final value) percentage value only, as shown in the following code snippet:
nav ul li:nth-child(odd) a:hover {
color: hsl(359, 99%, 40%);
}
In conclusion, if you can remember the mnemonic Young Guys Can Be Messy Rascals (or any other mnemonic you care to memorize) for the HSL color wheel, you'll be able to approximately write HSL color values without resorting to a color picker and also create variations upon it. Show that trick to the savant backend PHP and .NET guys at the office party and earn some quick kudos!
Fallback color values for IE6, IE7, and IE8
As you might have guessed, RGB and HSL are not supported in Internet Explorer versions below IE9. Therefore, if a fallback color declaration is needed for these browsers, specify it first before the RGB or HSL value. For example, the navigation link rule defined above could have a hex fallback specified like this:
nav ul li:nth-child(odd) a {
color: #fe0208;
color: hsl(359, 99%, 50%);
}
Alpha channels
So far you'd be forgiven for wondering why on earth we'd bother using HSL or RGB instead of our trusty hex values we've been using for years. Where HSL and RGB differ from hex is that they allow the use of an alpha transparency channel. This means one element with an alpha transparency will show what's beneath it.
Let's make some amendments to the And the winner isn't... home page to illustrate. First, we'll set a grungy background image in the body element, as follows:
body {
background: url(../img/grunge.jpg) repeat;
}
Now, we'll add a white background in the #wrapper div (which encloses all the other elements). However, instead of setting a solid white color with a hex value, we'll set a HSLA value as shown in the highlighted line in the following code snippet:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* Holding outermost DIV */
max-width: 1414px;
background-color: hsla(0, 0%, 100%, 0.8);
}
An HSLA color declaration is similar in syntax to a standard HSL rule. However, in addition, you must declare the value as hsla (rather than merely hsl) and add an additional opacity value, given as a decimal value between 0 (completely transparent) and 1 (completely opaque). Here, we have specified that our white #wrapper isn't completely opaque. The following screenshot shows how it looks in the browser:
The RGBA syntax follows the same convention as the HSLA equivalent, using an additional opacity value after the color:
background-color: rgba(255, 255, 255, 0.8);
Hopefully you can see that the addition of an alpha channel to both the RGB and HSL color modes, allows us a great deal of flexibility when layering elements. It means that we no longer have to rely on the transparency of images (PNG and GIF images, for example) to achieve this type of visual effect, which is great news when building a responsive design.
Why not just use opacity?
CSS3 also allows elements to have opacity set with the opacity declaration. A value is set between zero and one in decimal increments (for example, opacity set to 0.1 is 10 percent). However, this differs from RGBA and HSLA in that setting an opacity value on an element affects the entire element. Whereas, setting a value with HSLA or RGBA meanwhile allows particular parts of an element to have an alpha layer. For example, an element could have an HSLA value for the background but a solid color for the text within it.
The CSS3 Color module was the first of the CSS3 modules to reach the advanced Recommendation stage. Therefore, like the CSS3 Selectors module, CSS3 Colors are good to use right away, safe in the knowledge that the method of implementation is unlikely to change from this point onwards.
These are notes I made after reading this book. See more book notes
Just to let you know, this page was last updated Thursday, Nov 21 24