css vendor prefixes

Posted under CSS3 Course On By mohammed.mutawe

CSS vendor prefixes

It is the possibility of compatibility of the CSS code with all browsers in which we use web pages, and it allows the possibility of protecting and not disrupting the css code of our pages when updates are made to browsers by Google, Mozilla or others.

 

Definition

csstag
{
  -prefixes "-your parameters"
}

 

Types

These identifiers are looked at by browsers immediately, as your browser ensures that their presence is checked before running the web page, and each browser has a different formula that is attached to the css code next to the variable that we are modifying, and here are their types:

  • -webkit-: which supports compatibility with Google Chrome browsers.
  • -moz- : which supports compatibility with Firefox browsers.
  • -o- : which supports compatibility with Opera browsers.
  • -ms- : which supports compatibility with Internet Explorer browsers.

 

Example

Please, to understand Vendor Prefixes well, copy the following code into a text file and don’t forget to change its extension to .html and then run it in your browser.

<html>

<head>

<style>

div
{

    border:1px solid #CCC;
    width:30%;
    padding:50px;
    height:100px;
    margin:120px auto;
    background:#EEE;

    box-shadow:Horizontal Shadow | Vertical Shadow | blur | Spread | color | inset , outset;  /*This is Comment*/

    -moz-box-shadow:5px 5px 10px 10px #DDD;
    -webkit-box-shadow:5px 5px 10px 10px #DDD; /*inset;*/ ;/*inset puts the shadow inside the box */

    -o-box-shadow:5px 5px 10px 10px #DDD;
    box-shadow:5px 5px 10px 10px #DDD;
}

</style>


</head>

<body>

<div>Welcome To CSS3</div>
</body>

</html>

 

 

 

Leave a comment

Your email address will not be published. Required fields are marked *