CSS3 is the new improvement of CSS in the web history. It brought many changes in the Internet and still the web is changing a lot because of rapid change in that field. As CSS3 has not fully developed and still in developing stage browsers are constantly updating their services to make all CSS3 features available to their users. Here at this situation we need to understand about vendor prefixes and how there are drastically increasing the length of CSS code, making it difficult for the web developers to write such lengthy code.
What are Browser Vendor Prefixes?
To discuss about vendor prefixes we have to discuss about web browsers and their vendors. There are many browsers in the town. Some of the popular web browsers are Google Chrome developed by Google, Mozilla FireFox developed by Mozilla community, Safari web browser developed by Apple, Internet explorer developed by Microsoft company, Opera developed by Opera community etc. All these browsers are developed by different vendors as stated above and they have their own popularity in the town.
As CSS3 is in progress and it did not attain all the standards. To satisfy the web user and to be uptodate browser vendors are including in their browsers even those CSS3 properties which didn’t get standardized. If one property is introduced in the CSS3 and that property is still under development which need some attention to improve in the different stages(CSS3 is developed under different stages/levels) then browser vendors are including those properties into their respective product(browser).
In order for their browser to implement the new CSS3 properties these browser vendors are introducing vendor prefixes. Did you ever come across some css code that includes the code below…
span style="font-family: inherit;">.test {-webkit-transform: rotate(90deg); /* for webkit browsers*/-moz-transform: rotate(90deg); /* For mozilla browser*/-ms-transform: rotate(90deg); /* IE 9 */-o-transform: rotate(90deg); /* For Opera*/transform: rotate(90deg);}
<span style="font-family: inherit;"> </span>
The fact is that all the 5 lines of CSS code do the same job that is to rotate an item to 90 degrees. The actual need for writing 5 lines of code is to make the code render correctly on different browsers. Here the different vendor prefixes are responsible to tell browsers to make the code compatible to them.
So if we are eager to implement CSS3 property in our CSS code then we have to definitely include those vendor prefixes proceeding the property. Here in the above code -webkit- is the prefix for making Google chrome and safari to understand CSS3 property. Similarly -moz- is for Mozilla FireFox browser, -ms- for Internet explorer and -o- for Opera web browser. In our recently released post how to bend sidebar to specific angle we observed that we have used much of browser prefixes make our code compatible with all the browsers.
So if we are eager to implement CSS3 property in our CSS code then we have to definitely include those vendor prefixes proceeding the property. Here in the above code -webkit- is the prefix for making Google chrome and safari to understand CSS3 property. Similarly -moz- is for Mozilla FireFox browser, -ms- for Internet explorer and -o- for Opera web browser. In our recently released post how to bend sidebar to specific angle we observed that we have used much of browser prefixes make our code compatible with all the browsers.
A Way to reduce CSS code | eCSStender
Here our aim in to decrease length of CSS code as possible as such by avoiding the vendor prefixes. Developers like me and you are definitely in need of this trick. So if we successfully do everything correct the above code will be reduced to
Also read: How to display programming language code to blogger posts
<span style="font-family: inherit;">.text {transform: rotate(90deg);}</span>
This code will be compatible with every modern browser in the present days. So lets start to know how to implement this useful CSS trick.
We have to use eCSStender to get the work done.
Step 1: Go to eCSStender.org website and hit the download option among the three options(download, extensions, documentation) available.
Step 2: Now a file will be downloaded. It’s a very bit confusing if we download it for the first time. You will see many files after extracting it. Just open SRC folder among the files and copy the eCSStender.js file to clipboard which is present inside SRC folder.
Step 3: Now if you are testing it in html document then place this eCSStender.js file just above
tag.We have to use eCSStender to get the work done.
Step 1: Go to eCSStender.org website and hit the download option among the three options(download, extensions, documentation) available.
Step 2: Now a file will be downloaded. It’s a very bit confusing if we download it for the first time. You will see many files after extracting it. Just open SRC folder among the files and copy the eCSStender.js file to clipboard which is present inside SRC folder.
Step 3: Now if you are testing it in html document then place this eCSStender.js file just above
Step 4: Now again go to eCSStender.org website and this time click on extensions link(see step 1). Download any of the existing extensions.
Step 5: Here also you will see junk of files but follow similar steps as in step 2. Now copy the file which is in SCR folder and paste it again above tag. See the below image to understand carefully.
So this is how you have to implement eCSStender code in your website or at the development projects to reduce CSS code length while programming. This is very easy to implement and you can follow this method when you are involved in the development of websites or other web related things.
0 comments