Cascading style sheet is a popular technology used by web developers to separate content of the web pages from its design. CSS provide wide range of features to control the look and feel of the web pages without even touching main HTML design. The standards for CSS are developed by World Wide Web consortium also known as W3C. That makes a CSS a universal web styling language with consistent syntaxes with improved cross browser compatibility. Most importantly CSS file can be totally separated from the main HTML design as well as it can be embedded with it. Most of the popular web designing tools including Adobe Dreamweaver support CSS by its default configuration. In order to cope up with the modern demands of we design CSS has evolved drastically with in past few years. As a significant result of that improvement the CSS3 standards are developing by W3C. The progress they have made is displayed in here which is in official W3C web site. However at this moment most of the proposed features have been implemented by major web browsers, so we can already enjoy the power of CSS3.
History
CSS1
CSS1 is the first edition of Cascading Style Sheets which were introduced in 1996. It came with the support for several properties. Introduction of unique ‘id’ for each property and introduction of classes to properties that should have the same styles attributes were the most important things there were. Margin, border, padding and positioning also powered by style sheets although they could be done by using the HTML elements. Spacing between lines and rows of tables are also easily done using the stylesheets. The W3C stated the importance of using CSS instead of having the html as the giving the ability to optimization and making it easy for the designers to design and settle down the design easily.
CSS2
CSS2 was published in 1998. Positioning of index with several property values such like fixed, absolute, relative and indexing were the commonly highlighted ones among them. Bidirectional texts and some other new front properties such as shadows were introduced by this edition of CSS. Two updates and features came in to fix the errors in CSS 2. CSS 2.1 was the last 2nd generation edition of CSS.
CSS3
CSS3 is the latest edition of the CSS Stylesheets. There are several new functionalities have been provided through CSS3. Functions such like opacity, Text-overflow, media queries and box shadows are some of the much attractive introductions.
Rounded Corners
As there are much new features, the simplest and easily useable one is that the rounded corners. The previous CSS2 stylesheets did not allowed users to make this available in one step. They had to add four circular images for the four edges of the div and make the border rounder. The “-moz-border-radius” and “-webkit-border-radius” properties enable the users to be those borders round. Male the border image availability is another great introduction as it lets the user to add custom and decorated images for the borders.
Background Decoration
The background decoration is available with the possibility of customizing it. ‘background-origin’ and ‘background-clip’ gives a customized display for the content background. It has also enabled to have multiple backgrounds to the same content through the CSS3 styles. In addition, there is a new feature which is called background-image-size to resize the size of the background image of the divs.
Colors
There is a huge variety of colors available with the new CSS edition. HSL, HSLA and RGBA are the new color schemes. The new ‘A’ value stands for the opacity. With this value, the divs can make transparent and give a much attractive look to the appearance. In early editions, the transparency was obtained by adding a .png or .gif image as the background.
Text Effects
Most of the occasions when it is need to add customized text effects such like the shadow; the designers used graphics made using the Photoshop like software. With the latest edition of the CSS, it can be done without adding a weighted image to the content. The ‘text-shadow’ property comes with making them possible and providing a better image than the CSS. Text overflow control has made it easy to give good boundaries to the content while having the two values which are ‘ellipsis’ and ‘clip’. ‘Word wrap can be used to mark the boundaries of a particular text area while giving the options to mark the boundaries even by the number of letters or words.
Attribute Matching
Attribute matching made the styles available for some tags which are named with some starting part of a string. For example, the ids’ which are named as ‘sosa’ and ‘sopa’ can be easily applied with styles by making the tag name starting value as ‘so’. The outline property can be used to make an outline for the content. In earlydays, it was done by having two separate divs and applying the border to the outer one in which the width and height values greater than the inner one.
Box Model
Box model is a new property which was introduced with the CSS3 edition. With this, it can be easily assigned with customized div appearance. There should be two inner divs and a single outer div with the width of each inner div being 50%.
Web Fonts
A new collection of web fonts was introduced with the CSS3 edition. The multi column layout view also can be applied to the content as it can be used to provide multi column paragraphs. Media boxes are also a new implementation that could help to give a good view to the end user.
Suggestions For Future Development
One of the most expected further implementations are that the ‘Math’ functions of the CSS. It can be used in a vast area if it was introduced with mathematic functions. Aural Stysheets also expected to released but the W3C has not made a clear statement about that. There will be a set of properties for creating charts in the near future. Although CSS can be used now also to draw these charts, it is expected to be more convenient way in the near future. Image processing functions will be a good implementation to future. The page size could be removed from a large capacity. Though W3C has introduced universal standard for CSS, different browser engines have slight variation of interpretation. This can be identified as a major drawback of CSS standards. Due to this developer still have to think about using CSS in some special development scenarios. Furthermore in future releases CSS might contain advanced image processing techniques too. When thinking about far future CSS might be able to control HTML tags beyond 2D layout. Even at this moment there are some demonstration of 3D image gallery made using CSS3 with the aid of HTML5. They will be even improved most importantly to work on any browser platform.
References
- 7 Awesome CSS3 Techniques You Can Start Using Right Now. (n.d.). Retrieved 06 07, 2010, from Mashable: http://mashable.com/2010/06/04/awesome-css3-techniques/
- Cross-browser CSS3 border-radius (rounded corners). (2010, January). Retrieved June 2010, from dimox.net: http://dimox.net/wp-images/css-border-radius.jpg
- CSS3 Modules. (n.d.). Retrieved 06 08, 2010, from CSS: http://www.css3.info/modules/
More Posts
- Featured in Home
- Filled under Technology
- Tagged with CSS3, New
Bookmark
