5 Tips og triks Hvordan Optimaliser Css, Tutorials

5 Tips og triks Hvordan Optimaliser Css

I denne artikkelen vil vi finne at hvordan du optimaliserer Css.This er meget enkel og grunnleggende tips for web-designere og utviklere. Ikke bare vil disse tipsene hjelpe redusere filstørrelsen på CSS fil, men de vil også få fart på kodingen hvis du foretrekker å gjøre noen av CSS for hånd.

1. Bruk CSS stenografi


  Før 

  p ( 
  ; margin-top: 5px; 
  ; margin-right: 10px; 
  ; margin-bottom: 15px; 
  ; margin-left: 20px; 
  ) 


  Etter 

  10px 15px 20px ; } p (margin: 5px 10px 15px 20px;)

2. Fjerne unødvendige mellomrom


  Før 

 width : 900px ; height : 100 %; margin : 0px ; padding : 0px ; background-color : #cccccc ; } . vikle (width: 900px; height: 100%; margin: 0px; padding: 0px; background-color: # cccccc;) 
  Etter   width : 900px ; height : 100 %; margin : 0px ; padding : 0px ; } . vikle (width: 900px; height: 100%; margin: 0px; padding: 0px;)

3. Bruk stenografi farger

Longhand hex farger er angitt som tre røde, grønne og blå triplets, slik:

  : #fdca30 ; } p (color: # fdca30;) 

Du kan forkorte farger som har en identisk verdi for hvert par, det # rrggbb;, med kun én verdi per par, så dette:

  : #ffcc00 ; } p (color: # ffcc00;) 

blir, med stenografi heksadesimal notasjon:

  : #fc0 ; } p (color: # fc0;) 

Navngitte farger kan lett vedlikehold, men de er generelt lengre enn sine stenografi hex ekvivalenter (unntatt rød og tan).

4. Bruk etterkommer Selectors

  color :red ; } div. advarselen p (color: red;) 

 > <div class = "warning"> 
  <p> Advarsel!  Meltdown er overhengende. </ P> 
  </ div> 

5. Bruk Css CompressTools

hvis du ikke ønsker å kaste bort tiden din på å endre den gamle stilark kan du bare bruke elektronisk css komprimere verktøy, det gjør arbeidet ditt på sekunder
sjekk dette online css komprimere verktøy ...
Css ryddig
Renhet Css
Css Optimiser
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C Css Validator