CSS3 pie

Dilemma! CSS3 biedt heel wat gelikte effecten, maar niet elke browser ondersteunt CSS3. Een goede webdesigner maakt nog steeds cross-browsercompatibele websites. Er is echter een elegante oplossing: CSS3pie zorgt ervoor dat enkele CSS3-effecten als afgeronde hoeken, schaduw en de kleurovergang ondersteund worden door elke browser. In deze tutorial gebruiken we eerst CSS3 via de standaardmanier. We bestuderen vervolgens hoeveel browsers dit ondersteunen. Tot slot leren we via CSS3pie werken.

INLEIDING: de traditionele manier

Via css3generator kan je eenvoudig CSS3 genereren. Je kiest het gewenste effect, vult enkele parameters in en krijgt al gauw de bijhorende code.

Een voorbeeld:

<style>
#box {
           border: solid 3px #ccc;
    
background-color: #ededed;
     
padding: 10px;
      
-webkit-border-radius: 10px;
     
border-radius: 10px;         
           }

</style>

<div id="box">Lorem ipsum semper li</div>

Resultaat:

Wanneer we via caniuse.com bestuderen hoeveel browsers deze code ondersteunen, komen we tot conclusie dat dit 83,7% is.

Via CSS3pie

We gaan nu naar www.css3pie.com. Hier kan je vinkjes plaatsen bij de gewenste effecten. Dadelijk krijg je de nodige code.

De code is praktisch identiek. Er wordt echter verwezen naar een htc-bestand. Dit kan je downloaden op http://css3pie.com/download.   

    <style>
#box {
border: solid 3px #ccc;
    
background-color: #ededed;
     
padding: 10px;
      
          
-webkit-border-radius: 10px;
     
-moz-border-radius: 10px;
          border-radius: 10px;
        
}
</style>

Het resultaat is een mooie cross-browsercompatibele code.

We zien dat css3pie nog een extra prefix toevoegt: -moz-.

Gerelateerd:

   Cross-browsercompatibiliteit

   Nieuw in CSS3

   Prefixr, voor cross-browsercompatibele websites

   Progressive enhancement vs Graceful degradation

   Browserhacks voor IE

Meer van dit lekkers

BEKIJK ALLE TUTORIALS!

Sharing is caring

Iets bijgeleerd? Deel deze tutorial!

U bent niet alleen

deze pagina
totaal

© 2000 - 2016 Zelfstudie.be - Alle rechten voorbehouden

Website laten maken: kerfuffle.be - Website publiceren: zelfhosting.com