If you’ve discovered some new CSS3 features and are craving to know how to use them, you can, but only if you have browser capability of IE 9 or above. Latest browsers are compatible with some of the new features, and you can now use them.
So, here is what the new browsers can enable you to use:
- CSS Animations and Transitions
With new features you can make CSS animations in IE 10 in two ways. First, you can create animations by changing the CSS properties by declaring transition, enabling you to create hover or mouse down effects. You can also create animation by changing element style with Java Script. Another way to define animations is by describing those specific points in the animation with the @keyframe rule. Animations can be automatically repeated without you having to repeat the process every time.
· Calculating Values With calc()
You can apply the calc() function in the new CSS feature for simple arithmetic, in any length or size. More so, it also allows freely mixing different units, viz. percentages, pixels, etc. rendering earlier layout hacks redundant. All of this works in IE9 and higher.
· Advanced Selectors
You no longer need to assign IDs to elements for styling them. New selectors in CSS 2.1 and CSS3 enable you to cleanup layouts, and make your stylesheets more powerful. This is supported in all major browsers starting IE9 upwards.
· Generated Content and Counters
Generated content is supported everywhere, starting from IE9 up, and uses less HTML to develop the same layouts, a resourceful tool for developers, through ::before and ::after pseudo elements. It is very handy when extra box shadows or other visual elements are required which would otherwise require extra spans or divs. This way a smaller and better semantic HTML is achieved. Pseudo Elements gives access to counters with CSS3, with increment from a CSS rule. Attributes from the parent elements can also be accessed.
You can effect smoother transitions between colors without resorting to images, Linear or radial, and repeatable. Gradients enable web designs to be more creative, also appearing pleasing on retina displays. After some minor modifications Gradients are now available about everywhere.
Gone are the limitations of having only a few “web-safe” fonts. Now by including a stylesheet in your page you can embed beautiful fonts from Google Fonts, Typekit and even Fontawesome. This is possible by @font-face rule, so you can define name, characteristics and fonts source files which can be later referred in the font/font-family declarations. Webfonts can be made to work even on older browsers viz. IE6.
· Box Sizing
The main problem for CSS beginners is the box model. With standardization bodies it is restrictive to have the CSS width and height of an element affected by its padding and borders. Now by using the box-sizing rule, setting it to border-box makes elements behave as deired.
· Border Images
The border-image property, in a single image (sprite), enables displaying custom designed borders around elements. Borders can be made to correspond with each region of an image in a different part of the border.
· Media Queries
Contemporary web design practice mandates using Media Queries for changing websites. Now websites can be designed to be responsive and adaptable to the type of device, orientation and resolution. All that is required is to enclose CSS styles in a block guarded by a @media rule. The media query can incorporate checks for the device resolution and orientation, color depth, pixel density and more.
· Multiple Backgrounds
Designing for interesting effects, different images can be stacked as backgrounds of the same element, each being movable and animated independently.
· CSS Columns
· CSS 3D Trans
This feature offers web developers powerful tools for impressive results.
Jim Raymond is a specialist in web design and development. He is a popular contributor to many leading IT journals across the country, writing on a wide array of subjects in his field. Visit our site for more information.