CSS3: Older Browsers And Common Considerations

Release of IE9 proved that Microsoft has intent to go head to head with standard based technologies. IE is yet the most famous browser of the world, this is a good news for us web craftsmen embracing the idea of using CSS3 now as usual option. However, IE9 is not supported by operating systems older than vista due to the standard of graphics it involves but a lot of users and businesses are still using XP as primary operating system to get the work done.

They can’t upgrade due to the resistance to change or high upgrade fee. So it may take a while for the majority of population to get used to new technology.

While there are so many users of CSS3, many are still unaware about it and don’t know where to begin from. This article will try to explore the idea behind CSS3 and then explain how to utilize the optimal use of older browsers and some regular issues.

A Helpful Analogy

There can be no better example to explain CCS3 than relating it to the movies to show its interesting and entertaining aspect. Filmmakers don’t know on what platform their products would be viewed upon. Films can be watched directly on cinema, at home on television and on portable devices too. Between these major options, there is yet a big potential of differences: IMAX, DVD, Blu-ray, surround sound- few may even go for VHS!

Irrespective of how others are choosing given options you will choose the one which suits you well. You will choose the platform which would make your film watching experience more realistic and convenient. Every user works and thinks that way.

Now CSS3 can be compared to 3-D technology. Both are considered new age technology that adds a lot of spice and ease to the product. But yet it is possible, acceptable and sometime even essential to make a movie without 3-D effects. Just like that, you don’t need to jump on the new wave and accept it with open embrace using all the new effects you can. But sometime you cannot compromise with the quality and the necessary improvements in the website.

However, comparing CSS3 to 3-D isn’t completely fair. Many times, CSS3 simple allow the things in the conventional and usual way like we have been doing for years without being too complex.

To Gracefully Degrade Or Progressively Enhance?

After creating a film as best as you can you need to edit the product to support the viewing platform. Ring some bell? If you got a bit of idea about CCS3, then it should.

We need to maintain a balance for the use of CCS3. First thing to keep in mind is to keep the website usability for those whose browsers are unable to support CCS3 and at the same time providing the CCS3 features for those whose browsers do. Every film is not Avatar but every film should be a good experience. Regardless of what you adopt, you will face the same challenges.

Graceful Degradation

In graceful degradation, you code for the new browsers but make sure that it remains usable for the old browsers as well even if the user’s experience may not be as pleasing as by the newer browsers.

A similar process is employed in it like using IE-6 style sheet, where you serve a similar kind of style to most of users, while providing alternate style for older browsers. Usually, an old version website removes or replaces styles and effects that don’t work with older browsers and fixes layout loopholes to remain usable. But graceful degradation is different in the way that it uses the capability of browser instead of counting on its version. It doesn’t require complete change in style and effects. That is why, majority of the users get a normal enhanced view and fixes are applied for the people who are yet using old browsers.

Aggressive graceful degradation is the central theme of new book of Andy Clarke, Hardboiled Web Design. There are many other examples also, including Do Websites Need to Look Exactly the Same in Every Browser.com, which is developed to show the technique and Vtravelled blog of John O’Nolan showing the degrading of the older browsers that users may not even notice. And a WordPress user should compare the admin dashboard between IE and another browser.

Progressive Enhancement

Progressive enhancement turn the wheel anti-clockwise: means building for the older less supportive browsers and then using CCS3 to enhance the effects for newer more powerful browsers. It was done with separate enhancement style sheets and even now by some.

At the beginning, most people will code for a commonly used browser, then add some coding to make it compatible with IE-7 and 8, then they may put some fixes to support IE-6 for good measure, then they involve brain in thinking about how can they improve it with CSS3? From that point, they would put features such as rounded corners, gradients, @font-face text replacement and so on.

As browser makers make it more compatible and supportive, progressive enhancement seems like going backward. Yet progressive enhancement is a very good approach for beginning and understanding the working and features of CCS3.

For example, the websites by Sam Brown and Elliot Jay Stocks. Both of these features enrichment-type style sheets and the slides from his 2009 web directions talk.

Progressive Enhancement
SOURCE: http://www.webdirections.org/resources/elliot-jay-stocks-progressive-enhancement/

Both of the processes are opposite of each other. Where graceful degradation is a top to down way, which begins from the latest browsers most supportive for utilizing CSS3 and going down to older less supportive ones.

Progressive enhancement is works in reverse, bottom-up, using a common standard browser of choice as the base, also following IE-7, and finally adding CSS3 for the latest generation of browsers that are most supportive. It is easier to work in comparison while you are getting used to work with CCS3. It also seems sensible while adding CCS3 to the older website.

But whatever of the option you may choose, there are a number of the things to keep in mind, of what all CCS3 features are coming out. Later on, we will look at considerations for few main properties.

How To Do It?

Whatever option you may choose but you will no doubt find yourself struggling with the common fallback process at some point. Questions like: how would the element look like with a certain kind of style and how it would look like without that? Or would it work without hassle? Because if it would not work good then you will need to do something about it.

Typical way is that you would first include a feature by CCS3, then by CSS 2.1, then you may use JavaScript, and then whatever hack you used to use for legacy browsers. You may say that progressive enhancement would slightly modify this path, using CSS 2.1 before CSS3.

At every stage, you better take in mind whether degrading or enhancing a feature would become too complex or simply providing another option would be a more sensible step.

Ordering Properties

Now take a quick peek at ordering properties and how browsers read them. Makers of browsers initially offer CSS3 functionality by browser prefixes: -moz for Mozilla, -webkit for Chrome and Safari, Opera use –o, etc. Browsers don’t use any prefixes that are not meant for them. It means that conversion is to list the prefixes of browsers first and then the default property, as follows:Ordering Properties

Yes, this creates a little overhead, but if you know how such effects were created before CSS3, it is easy to do.
Browser that don’t support a given property will not take it. But any browser that is compatible to it will implement its browser-specific version; and when finally it would support the generic feature, it will implement that.

Why we should keep it that way? Well, once all the browser begin support that given property in the similar way, then they will adopt a default version of the feature but until then they will keep using the prefixed version. By keeping it in the same order as shown above we can make sure that the common version is implemented as the fallback once it is compatible, fortunately leading to nice rendering across browsers.

JavaScript

JavaScript is the most used method to enable cross-browser CCS3 features compatibility, and it can either be used as another option.

Modernizr

It is a great tool for implementing CSS3 fallbacks. For any designer working with CSS3 working in production, Modernizer is essential. It can make possible to use CSS3 for properties where it is compatible, and to provide other suitable options where it doesn’t.
Modernizr
SOURCE: http://www.modernizr.com/

Modernizr works by implementing classes to the html element of the page, which one will then add in the style sheet.

For example, to display a different background when CSS3 elements are not supported, your code may look something like that:Webgranth

To change for a display of a different background only where the CSS3 property is supported, you would do like;
Webgranth

By going like that you would get the control of what may show in the absence of a property, and you can manipulate the output to whatever is more sensible. In the given case, you can serve a gradient image because of support for CSS3 is missing.

By this control over the properties, you can manipulate the output quite correctly and can solve any problem that might arise from a missing property.

CSS3 PIE

Unfortunately, it is not the same pie that brings water in mouth. CSS3 PIE stands for progressive Internet Explorer. As the official description says:

Telling in simple way: PIE makes Internet Explorer 6 to 8 capable of implementing some of the great decoration properties.
CSS3 PIE
SOURCE: http://css3pie.com/

While it doesn’t contain so many features, but it does allow you to use box-shadow, border-radius and linear gradients in IE without adding much of extra coding. To begin, upload the CSS PIE JavaScript file and then whenever you find it suitable to apply the functionality, you would include it in the CSS, like so:

.somediv {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
behavior: url(path/to/PIE.htc); }

Simple and easy way, and it can save you the difficulty of using JavaScript hacks to get specific effects on IE.

Selectivzr

CSS3 has grown its repertoire beyond advanced selectors like [rel=”selector”] and pseudo-selectors such as :nth-of-type, which gives the control in your hands and enable you to dispense with many presentational classes and IDs. Compatibility for selectors differs greatly, especially with the wide variety of additional selectors being given.
Selectivzr
SOURCE: http://selectivizr.com/

Therefore, Selectivzr is likely to be the third most useful tool in scripting which enables advanced CSS3 selectors to be used in older browsers and is good to work with old IE versions.

Browse the selectivizr website and download then add the script. Then you need to pair it with a JavaSrcipt framework such as jQuery or MooTools, but chances are you’re working with one already. The home page deserves a look because not all selectors are supported by all JavaScript libraries and you need to be sure what your need is supported by your library of choice.

Problems?

The main problem with all the solutions that are mentioned above is that they’re based on JavaScript and website owners also need to serve those who have neither CSS3 support nor JavaScript enabled. The optimum solution is to code sensibly and make use of natural CSS fallbacks by taking a kind of middle path by allowing the browser to not simply take CSS properties that it doesn’t recognize.

It may make your website not all according to your dreams CSS3 based styling that you want, but you need to keep in mind that there are still so many users out there without CCS3 support and without JavaScript enabled. And it is very important for you to make sure that they will also get a fully functional, usable and practical website if not that good-looking. Looks are second priority, usability is first.

Some CSS3 Properties: Considerations And Fallbacks

Too many CSS3 features are being used now-a-days and we are getting used to the quirks and disadvantages of CSS protocol. To make you understand some of the popular CSS3 properties, we’ll look at some of the problems you may encounter and some tricks to fall back in older browsers.

Border Radius

Support: Google Chrome 7.0+, Firefox (2.0+ for standard corners, 3.5+ for elliptical corners), Opera 10.5+, Safari 3.0+, IE 9
Property: border-radius
Vendor prefixes: -webkit-border-radius, -moz-border-radius
Example usage (even corners with a radius of 5 pixels):

.somediv {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }

Fallback behavior: rounded corners will display square.Border Radius

WordPress log-in button in IE and Google Chrome

Without involving much divs or JavaScript or a lot of well-paced, good-looking images, we can provide elements rounded corners with the use of straightforward border-radius feature.

But what about the browsers that don’t support border-radius? The easiest answer is, don’t bother. Because putting rounded corners in unsupported browsers isn’t that important. And if it is, then you need only do the usual stuff what is being used since ages: JavaScript hacks and images.

Could this property is confusing you? Actually, border-radius is pretty straightforward. Be careful while involving it with background images, because there are certainly some weak-points in some browser versions that keep the corners of the images from appearing round shaped. Except that, this is one of the most compatible CSS3 properties so far.

Border Image

Support: Google Chrome 7.0+, Firefox 3.6+, Opera 11, Safari 3.0+, no support in IE
Property: border-image, border-corner-image
Vendor prefixes: -webkit-border-image, -moz-border-image
Example usage (a repeating image with a slice height and width of 10 pixels):

.somediv {
-webkit-border-image: url(images/border-image.png) 10 10 repeat;
-moz-border-image: url(images/border-image.png) 10 10 repeat;
border-image: url(images/border-image.png) 10 10 repeat; }

Fallback behavior: shows standard CSS border if property is set, or no border if not specified.
Border Image

A border-image demo on CSS3.info. The bottom paragraph shows a standard property of border: double orange 1em.

The border-image property is less heralded among the new properties, partly because it can be a difficult to make it compatible. Without going into details, lets consider the image you are working with and test a few changes before including the feature. Like how the border may look like if the content didn’t worked as desired? How will it fit to the content? Involve a thought to choose between stretch and repeat.

Before applying a border to an image make sure that everything is correct and desired, and try different sizes and types to see how a repeating border looks.
border-image

Box Shadow

Support: Google Chrome 7.0+, Firefox 3.6+, Safari 3.0+, IE 9
Property: box-shadow
Vendor prefixes: -webkit-box-shadow, -moz-box-shadow (-moz no longer needed as of Firefox 4)
Example usage (showing a black shadow, offset down by 10 pixels and right by 10 pixels, and with a blur radius of 5 pixels):

.somediv {
-moz-box-shadow: 10px 10px 5px #000;
-webkit-box-shadow: 10px 10px 5px #000;
box-shadow: 10px 10px 5px #000; }

Fallback behavior: shadow is not displayed.

Box shadow enable you to fast and quickly add a little shadow to the elements. For anyone who has worked with shadows in Photoshop, Fireworks or the like, the principals of box shadow should seem like butter.

In its absence? You could use selective borders (i.e. a left and bottom border to imitate a thin box shadow).

.somediv {
-moz-box-shadow: 1px 1px 5px #888;
-webkit-box-shadow: 1px 1px 5px #888;
box-shadow: 1px 1px 5px #888; }
.no-boxshadow .somediv {
border-right: 1px solid #525252;
border-bottom: 1px solid #525252; }

RGBa and HSLa

RGBa support: Google Chrome 7.0+, Firefox 3.0+, Opera 10+, Safari 3.0+, IE 9
HSLA support: Google Chrome 7.0+, Firefox 3.0+, Opera 10+, Safari 3.0+
Property: rgba, hsla
Fallback behavior: the color declaration is ignored, and the browser falls back to the previously specified color, the default color or no color.

.somediv {
background: #f00;
background: rgba(255,0,0,0.5); }

In the example above, both background declarations specify the color red. Where RGBa is supported, it will be shown at 50% (0.5), and in other cases the fallback will be to the solid red (#f00).

RGBa and HSLa

SOURCE: http://24ways.org/

24 ways to make good artistic use of RGBa

While there is a broad support for opacity, its limitation is that everything associalted with an element becomes transparent. But now we got two different ways to define color: RGBa (red, green, blue, alpha) and HSLa (hue, saturation, light, alpha).

Both of these provide new ways to define colors with the extra benefit of enabling you to specify the alpha channel view.
The obvious fallback for RGBs and HSLa is a solid color; not a problem, but the main thing to watch out is legibility. A semi-opaque color can have a totally distinct look than the original one. An RGB value shown as a solid color and the same value at .75 opacity can vary massively depending on the background shade, so be sure to check how your text looks against the background.

24 ways to make good artistic use of RGBa

Changing transparency can affect the legibility of text

If transparency is necessary then you may also use a background PNG image. Of course, this brings with it the old IE6 issue again but it can be easily solved using JavaScript.

Transform

Support: Google Chrome 7.0+, Firefox 3.6+, Opera 10.5+, Safari 3.0+
3-D transforms support: Safari
Property: transform
Vendor prefixes: -o-transform
Example usage (rotating a div 45° around the center, and scaling it to half the original size — for illustration only, so the translate and skew values are not needed):

.somediv {
-webkit-transform: scale(0.50) rotate(45deg)
translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform-origin: 50% 50%;
-moz-transform: scale(0.50) rotate(45deg)
translate(0px, 0px) skew(0deg, 0deg);
-moz-transform-origin: 50% 50%;
-o-transform: scale(0.50) rotate(45deg)
translate(0px, 0px) skew(0deg, 0deg);
-o-transform-origin: 50% 50%;
transform: scale(0.50) rotate(45deg)
translate(0px, 0px) skew(0deg, 0deg);
transform-origin: 50% 50%; }

Fallback behavior: the transform is ignored, and the element displays in its original form.

Transform
SOURCE: http://www.westciv.com/tools/transforms/index.html

Westciv offers a useful tool for playing around with transformations.

The transform property gives you a way to rotate, scale and skew an element and its contents. It is a great way to put elements in a nice order on page and give them a new fresh look and feel.

A simple fallback in the absence of an image-based transform is to use an alternative image that is already rotated. And if you want to rotate content then you can always use JavaScript for the rotation of elements. Another simple alternative is to rotate the background element is an image editor beforehand and keep the content level.

We’ve gotten by with level elements for so many years, there is no reason why people would discontinue using old browsers.

Animations and Transitions

Transitions support: Google Chrome 7.0+, Firefox 4.02, Opera 10.5+, Safari 3.0+
Animations support: Google Chrome 7.0+, Safari 3.0+
Property: transition
Vendor prefixes: -webkit-transition, -moz-transition, -o-transition
Example usage (a basic linear transition of text color, triggered on hover):

.somediv:hover {
color: #000;
-webkit-transition: color 1s linear;
-moz-transition: color 1s linear;
-o-transition: color 1s linear;
transition: color 1s linear; }

A basic animation that rotates an element on hover:

@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
.somediv:hover {
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s; }

Fallback behavior: both animations and transitions are simply not taken by unsupported browsers. With animations, this means that nothing happens and animated views are absent. With transitions, it depends on how the transition is written; in the case of hover, such as one above, the browser simply displays the transitioned default state.

Animations and Transitions

404 page of the 2010 Future of Web Design conference attracted attention because the background was spinning. Now on opening this website on IE you will see a static background image.

Animations and transitions in CSS3 are slowly seeing extra use, from subtle hover effects to more elaborate shifting and rotating of elements across the page. Most effects either appear at the page load or (more frequently) are used to enhance a hover effect. Once you are inside the sea of animations, you will begin having fun as they are much more usable and accessible to designers now than in the old days.

Beginning off small with CSS3 transition property is best, subtly transitioning things such as link hovers before moving on to larger things.

Once you are habitual with basic conversions and manipulations, you can get into more involved animation property. To use it, you declare keyframes of an animation with @-webkit-keyframes and then call this keyframe animation in other elements, declaring its timing, iterations, etc. Note that animations work better with CSS3 transforms than with other properties, so stick to transform and translate rather than shifting margins or absolute positioning.

Of course, people have been animating with JavaScript for much time. But if you want to put a simple animation like hover state, then it hardly seems worth the extra coding. The simplest thing to do for older non-compatible browsers is to specify a state for hover, without any transition to it.

Font Face (not new in CSS3)

Support for different font formats: Google Chrome 7.0+, Firefox 3.1+, Opera 10+, Safari 3.1+, IE 6+
Property: @font-face
Example usage (a @font-face declaration for Chunk Five, an OTF font, and calling it for h1 headings):

@font-face {
font-family: ChunkF; src: url(‘ChunkFive.otf’); }
h1 {
font-family: ChunkF, serif; }

Fallback behavior: just as when any declared font isn’t available, the browser continues down the font stack until it finds an available font.

font face
SOURCE: http://newadventuresconf.com/

The New Adventures in Web Design conference serves from Typekit.

But this is not totally fresh for CSS3. This has been around since the time of Internet Explorer 5. However, increased usage has been seen since the browser makers begin roll out increased support for @font-face.

One issue that @font-face see is that a font isn’t displayed on the screen until the browser has downloaded it to the user machine, which sometimes means that user sees a ‘flash of unstyled text’ (FOUT). That is, the browser displays a font from further down the stack or a default font until it has finished downloading the @font-face file; once the file has downloaded, the text flashes as it switches to the @font-face version. So, minimizing the flash by stacking fonts of similar size and weight is important. If the stack is poorly compiled, then not only could the text be resized, but so could containing element, which all confuse users who have begin reading the page before the appropriate font has loaded.

The good news is that Firefox 4 doesn’t has a FOUT any longer, IE9, however, does have a FOUT but WebInk has written a script FOUT-B-GONE which takes these facts into account and helps you hide the FOUT from users in FF3.5-3.6 and IE.

Webgranth

On his blog, web designer Florian Schroff uses @font-face to serve the prater font (bottom), falling back to Constina, Georgia (top) and Times New Roman.

Many font delivery services which includes Typekit and Google Web Fonts, deliver their fonts via JavaScript, which gives you control over what is displayed while the font is being downloaded as well as what happens when the font actually comes on screen.

Because browsers wait until the full file of a font kit has loaded before displaying it, there are many services out there that let you strip out unnecessary section of the kit to reduce the size. For example, if you don’t want to use small caps, then you can quickly and easily cut it out of the file so the font renders more quickly.

Advanced Selectors

Support (varies depending on the selector used): Google Chrome 7.0+, Firefox 3.6+, Opera 9.0+, Safari 2.0+, IE 6+
Property: many, including :nth-of-type, :first-child, :last-child, [attr=”…”]
Example usage (coloring only links that point to Smashing Magazine, and coloring odd-numbered rows in tables):

a[href*=smashingmagazine.com] {
color:#f00; }
tr:nth-of-type(odd) {
background: #ddd; }

Fallback behavior: in the absence of support for advanced selectors, the browser does not apply the focused style to the element and simply treat it as any other feature of its type. In the two examples above, the link would take on standard link properties but not the specified color, and the odd numbered table rows would be color, and the odd-numbered table rows would be colored the same as other table rows.

Advanced selectors are a great tool for cutting the extra unnecessary code from the website. It will enable you to get rid of many presentational classes and gain extra control over the selections in your style sheet.

Using Selectivizr, you can get older browser to support these advanced selectors, which makes the selectors easier to use and more robust.
Advanced Selectors

We can easily assign styles using nth-type selectors. However, because the styles in this example are tied directly to the content, sticking to class names would be better, unless you are 100% certain that the order of words won’t change.

Abandoning classes and IDs altogether in favor of nth-type is tempting. But don’t throw them away just yet. Use advanced selectors when an element’s style is based on its location in the document or a series; for example, using nth-type(odd) for table rows or using last-of-type to remove some padding at the bottom of a list.

If an element’s style is based on its content, then stick with classes and IDs. That is, if inserting a new element or changing the order of items would break the style, then remain with the older way.

But if an element is already styled enough, then you may not need an additional class or ID at all (nor an advanced selector, for that matter).

Columns

Support: Google Chrome 7.0+, Firefox 2.0+, Safari 3.0+, Opera 11.10+
Property: column-count
Vendor prefixes: -webkit-column-count, -moz-column-count
Example usage (splitting content into three columns):

.somediv {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3; }

Fallback behavior: in the absence of support for multiple columns, the browser spreads the content across the full width that the columns would have taken up.

columns
SOURCE: http://yaili.com/

Multiple columns and their fallback on Invaili de Leon website.

This feature gives you a great easier way to spread content across multiple columns. The technique is standard in print, and on the web it makes it easy to go through content without the need to scroll.

The property’s main focus is to allow users to read horizontally without scrolling, first make sure that your columns aren’t too tall. Having to scroll up and down to read columns not only defeats their purpose but actually makes the content harder to read.

There are some JavaScript ways for multi-columns. For older browsers, though, there’s generally no need to stick with a multi-column layout, you may consider sensible alternatives for fallbacks.

Webgranth
SOURCE: http://tweetcc.com/

Without support for multiple columns, the block quotes on tweetCC change in style.

In the absence of CSS3 support, the browser will flow content across the full width of the container. You should be careful about legibility. It can be very tough to read content that spans the width of an area that is intended to be broken into three columns. In this case, you’ll want to set a suitable line length. There are a few ways to do so: increase the margins, change the font size or decrease the width of the element. Floating elements such as images and block quotes out of the flow of text can help to fill up any leftover space in the single column.

Gradients

Support: Google Chrome 7.0+ for -webkit-gradient, Google 10+ for -webkit-linear-gradient and -webkit-radial-gradient, Firefox 3.6+, Safari
Property: linear-gradient, radial-gradient
Vendor prefixes: -webkit-gradient, -webkit-linear-gradient, -webkit-radial-gradient, -moz-linear-gradient, moz-radial-gradient
Example usage (a linear white-to-black gradient running from top to bottom — notice the lack of -linear- in the Webkit declaration):

.somediv {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#ffffff), to(#000000));
background-image: -webkit-linear-gradient(0% 0%, 0% 100%,
from(#ffffff), to(#000000));
background-image: -moz-linear-gradient(0% 0% 270deg,
#ffffff, #000000);
background-image: linear-gradient(0% 0% 270deg,
#ffffff, #000000); }

A radial gradient running from white in the center to black on the outside:

.somediv {
background-image: -moz-radial-gradient(50% 50%, farthest-side,
#ffffff, #000000);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350,
from(#ffffff), to(#000000));
background-image: -webkit-radial-gradient(50% 50%, 0, 50% 50%, 350,
from(#ffffff), to(#000000));
background-image: radial-gradient(50% 50%, farthest-side,
#ffffff, #000000); }

Fallback behavior: the browser will show the same behavior as it would for a absent image file (i.e. either the background or default color).

Gradients
SOURCE: http://www.colorzilla.com/gradient-editor/

No one is missing the historical look of web 2.0. Fortunately, elements have come a long way from being used for glossy buttons, and this CSS3 property is the latest step in the evolution.

Gradients are applied in the same way like background images, and following are the ways to do it: hex codes, RGBa and HSLa.

Be cautious while applying a background with a full length to an element such as the body. In some browsers, this will limit the gradient to the edge of the visible page, and so you’ll lose the gradient as you scroll down (and if you haven’t specified a color, then the background will be white). You can get around this by setting the background-position to fixed, which ensures that the background doesn’t move as you scroll.

Specifying a background color not only is a good fallback practice but can prevent unforeseen issues. As a general rule, set it either to one end of the gradient or to a color in the middle of the range.

Legibility is also a consideration. Making text readable against a solid background color is easy. But if a gradient is dramatic (for example, from very light to very dark), then choose a text color that will work over the range of the gradient.

Radial gradients are a little different, and getting used to the origins and spreads may take a bit of experimentation. But the same ways apply on both. Note that Webkit browsers are switching from the -webkit-gradient property to -webkit-linear-gradient and -webkit-radial-gradient. To be safe, include both properties, but (as we know now) put the old property before the new one.

These issues aren’t completely new for us; we are familiar to gradients for years. If you really need one, then the obvious fallback is simply to use an image. While it won’t adapt to the dimensions of the container, you will be able to set its exact dimensions as you see fit.

Multiple Backgrounds

Support: Google Chrome 7.0+, Firefox 3.6+, Safari 2.0+, IE 9
Property: background
Example usage (multiple backgrounds separated by a comma, the first on top, the second behind it, the third behind them, and so on):

.somediv {
background: url(‘background1.jpg’) top left no-repeat,
url(‘background2.jpg’) bottom left repeat-y,
url(‘background3.jpg’) top right no-repeat; }

Fallback behavior: an unsupported browser will show only one image, the one on top (i.e, the first in the declaration).

Multiple Backgrounds
SOURCE: http://lostworldsfairs.com/

The fantastic Lost World’s Fairs website shows many backgrounds in its header and a solid color as a fallback.

Being able to set multiple background images is very useful. You can layer images on top of one another. And because CSS gradients can be applied as backgrounds, you can layer multiple images and gradients with ease.

You can also apply background elements within dynamically sized containers. Like, you could have an image appear 25% down the container and then another at 75%, both of which move with any dynamic content.

If multiple backgrounds are necessary for your website, you may like to insert additional elements and images into the DOM using JavaScript. But again, is that important? A simple well-thought image may suit your need. It is simply an issue of choosing the best image or blending the images into a composite (even if this makes for a less dynamic background).

Use Only Where Needed

We all know that CSS3 is not a necessity. Just because you can use CSS3 properties, doesn’t mean that you have to use them essentially. Applying effects is now simpler than buying vegetables, and so getting carried away becomes all too simple. You don’t need to round corner or make multiple effect as some kind of ritual. Simply like a film can be make and do well without 3-D technique, your website can also do well without unnecessarily spreading CSS3 everywhere around. The development in technology is only worth it if it makes our life easier.

It is a testament to those who are already using CSS3 that there are very few instances of its misuse at the moment. The websites that do seem to misuse it suggest that their designers either used CSS3 for its own sake or didn’t consider its implications on certain platforms.

In “Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation,” Smashing Magazine’s Vitaly Friedman notes a number of misuses of the text-shadow property.

text-shadow
SOURCE: http://www.sramekdesign.com/

A less-than-ideal use of CSS3 on SramekDesign.com.

The text-shadow feature is growing in popularity these days. One-pixel white shadows are popping up in text everywhere for no apparent reason. As Vitaly says:

… before adding a CSS3 feature to your website, make sure it is actually an enhancement, added for the purpose of aesthetics and usability, and not aesthetics at the cost of usability.

As you become familiar with CSS3’s new features that are unique, you will know when and where problems arise and what to do on such situations.

Using CSS3

CSS3 is the new technology and eventually it would take over, no question about that. So it wouldn’t harm to know how the language of future works well exactly. While IE is yet the most used browser used on earth, it now has less than half of the market share, meaning that the majority of people no longer use it and now there is no reason to not knowing the working of CSS3 as it is arriving over head fast with its beautiful wings.

To use CSS3 means to learn the principle that websites don’t need and wouldn’t look exactly the same in every browser but the important thing is to make it better and better in terms of looks and usability. The great way to learn CCS3 is like every other thing, accepting it with open mindedness and trickery.

 

Christiana McGee

Christiana McGee loves development and possesses specialization in converting Sketch to HTML. Associated with CSSChopper - Sketch to HTML Company, she constantly strives to serve the best, fastest and innovative solutions in a stre