Marusya's School Notes

Browser Support

Vendor prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized. Often, older browsers require a vendor prefixes to work as you want them to. Vendor prefixes should always be listed first.

HTML file:	Displayed by browser:
<style> .round { /* for Safari 3-4, iOS 1-3.2, Android 1.6- / -webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 4px; / for Firefox 1-3.6 / -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 4px; / for Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ / border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-right-radius: 3px; border-bottom-left-radius: 4px; / the following work for all browsers */ background-color: lightblue; width: 400px; padding:15px; } </style> <body> <div class="round"> <p>Different Corners: notice the CSS style is done without shorthand CSS.</p> <h3>Vendor prefixes maximize browser support:</h3> <ul> <li>use -webkit- for Android, Chrome, iOS and Safari</li> <li>use -moz- for Firefox</li> <li>use -ms- for Internet Explorer</li> <li>use -o- for Opera</li> </ul> </div> </body>	Different Corners: notice the CSS style is done without shorthand CSS. Vendor prefixes maximize browser support: use -webkit- for Android, Chrome, iOS and Safari use -moz- for Firefox use -ms- for Internet Explorer use -o- for Opera

HTML file:

Displayed by browser:

<body>
<div class="round">
<p>Different Corners: notice the CSS style is done without shorthand CSS.</p>
<h3>Vendor prefixes maximize browser support:</h3>
<ul>
    <li>use -webkit- for Android, Chrome, iOS and Safari</li>
    <li>use -moz- for Firefox</li>
    <li>use -ms- for Internet Explorer</li>
    <li>use -o- for Opera</li>
</ul>
</div>
</body>

Different Corners: notice the CSS style is done without shorthand CSS.

Vendor prefixes maximize browser support:

use -webkit- for Android, Chrome, iOS and Safari
use -moz- for Firefox
use -ms- for Internet Explorer
use -o- for Opera

Note:These vendor prefixes will only work in the browsers they are defined in.