Webmark

Odchudzamy CSS

Index » Kategoria: CSS » Tagi: css , tutorial.

Poniżej postaram się (w dużym uproszczeniu) pokazać, jak szybko i bez większych problemów "odchudzić" (czyt. zmniejszyć wagę) plik css, który dołączamy do strony www. Zajmę się grupowaniem selektorów oraz dziedziczeniem cech selektora rodzica przez selektor dziecko.
Wg. W3C zasada css składa się z dwóch elementów. Pierwszym z nich jest selektor drugim zaś deklaracja. W przykładzie:
[code lang="css"]p {margin:10px}[/code]
p – jest selektorem zaś {margin:10px} jest deklaracją
Deklaracja składa się jak widać również z dwóch elementów: własności i jej wartości. W powyższym przykładzie margin jest własnością natomiast 10px jego wartością (w tym przypadku rozmiarem marginesu). W literaturze wyrażenie własność funkcjonuje również jako cecha. I to tyle tytułem wstępu.
Najlepszym sposobem "odchudzenia" pliku css jest odpowiednie pogrupowanie selektorów lub deklaracji. Aby pokazać jak takie grupowanie wygląda w praktyce posłużę się przykładem ze strony konsorcjum W3C (chyba) dot. grupowania nagłówków. Poniżej zapis css, który będzie za chwilę zdecydowanie uproszczony dzięki możliwości grupowania selektorów.
[code lang="css"]
h1 { margin:0; color:#000;}
h2 { margin:0; color:#000;}
h3 { margin:0; color:#000;}
h4 { margin:0; color:#000;}
h5 { margin:0; color:#000;}
[/code]
Opisanie w ten sposób nagłówków nie jest błędem. Niemniej jednak widać, że wszystkie selektory-nagłówki mają takie same deklaracje (cechę i jej wartość). Można zatem pogrupować nagłówki oddzielając je przecinkami i przypisać im jedną wspólną deklarację czyli:
[code lang="css"]
h1,h2,h3,h4,h5 {margin:0; color:#000}
[/code]
Lepiej?
Przy okazji warto a nawet trzeba pokusić się o uproszczenie zapisu wartości poszczegĂłlnych cech selektorĂłw. W przykładzie powyĹźej do wartości 0 nie trzeba przypisywać jednostki – "zero" jest zawsze zerem bez względu na to czy dopiszemy do niej jednostę w px, em czy procentach. Jednostki naleĹźy dopisywać tylko do wartości róşnych od zera. Oczywiście napisanie 0px nie jest błędem ale jeśli moĹźna zaoszczędzić parę bajtĂłw…
W poniższym przykładzie, bez szkody dla strony można zaoszczędzić nie tylko trochę bajtów ale uczynić kod zdecydowanie bardziej przejrzystym czyli: grupujemy deklaracje
[code lang="css"]
p {
font-weight:bold;
font-size:10pt;
line-height:12pt;
font-family:verdana, tahoma, arial, sans-serif;
}
[/code]
Po odchudzeniu (zgrupowaniu deklaracji):
[code lang="css"]
p { font: bold 10pt/12pt verdana,tahoma,arial,sans-serif }
[/code]
Lepiej, bardziej przejrzyście, lĹźej, nowocześniej 🙂 Jeśli juĹź jestem przy jednostkach, pozwolę sobie wkleić podział jednostek zaczerpnięty gdzieś w sieci.

jednostki względne:
h5 { margin: 0.5em } /* w proporcji do wysokości
czcionki danego elementu */
h5 { margin: 1ex } /* w proporcji do wysokości litery x */
p { font-size: 10px } /* piksele na ekranie */

jednostki absolutne:
h1 { margin: 0.5in } /* cale, 1in = 2.54cm */
h2 { line-height: 3cm } /* centymetry */
h3 { word-spacing: 4mm } /* milimetry */
h4 { font-size: 12pt } /* punkty, 1pt = 1/72 cala */
h5 { font-size: 1pc } /* pica, 1pc = 12 punktĂłw */

Przypomnę, że określając w dokumencie krój czcionki należy też podać jej rodzinę czyli
[code lang="css"]p {font-family:verdana,tahoma,arial,sans-serif}[/code] gdzie sans-serif jest rodziną wcześniej określonych fontów.
Kilka przykładów "odchudzania" css:

Przed kuracją:
[code lang="css"]
p {
margin-left: 20px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 30px;
}[/code]
Po kuracji:
[code lang="css"]
p {margin: 30px 20px 30px 20px} [/code]
W tym przypadku zapisujemy marginesy od górnego zgodnie z ruchem wskazówek zegara czyli 30px (margines górny), 20px (margines prawy), 30px (margines dolny) i 20px (margines lewy). W tym przypadku, jeśli marginesy górny i dolny oraz lewy i prawy mają takie same wartości można pokusić się o dalsze uproszczenie zapisu:
[code lang="css"]
p {margin:30px 20px}[/code]
W tym zapisie 30px dot. marginesy gĂłrnego i dolnego a 20px prawego i lewego.
Kolejny przykład:

Przed kuracją:
[code lang="css"]
td {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
}
#edit: poprawiłem oczywistą pomyłkę w składni 🙂
[/code]
Po kuracji
[code lang="css"]
td { border: 1px solid #000}[/code]
I jeszcze co nie co o kolorach. KaĹźdy pewnie zauwaĹźył, Ĺźe kolory mogą być opisywane na kilka sposobĂłw czyli za pomocą angielskojęzycznej nazwy (np. red, green, blue); zapisu heksadecymalnego #ccffee i RGB (jednostkowego lub procentowego określenia zawartości kolorĂłw red/green/blue czyli np. (0,50,25). Najbardziej popularnym zapisem wartości koloru wydaje się jego forma heksydecymalna czyli np. #ccffee. Tutaj pozwolę sobie zauwaĹźyć, Ĺźe ten sam color moĹźna zapisać jako #cfe i zaoszczędzić parę bajtĂłw. Analogicznie kolor #ffeecc jako #fec, #ddccee jako #dce itd …
Oczywiście grupować można praktycznie wszystko: klasy, idy, pseudoklasy i pseudoelementy ale o tym innym razem. Powyższymi, kilkoma przykładami chciałem zwrócić uwagę na możliwość znacznego odchudzenia i oczyszczenia pliku css nie tracąc przy tym żadnych właściwości zapisu. Po więcej informacji odsyłam do konsorcjum W3C (http://w3c.org).

Teraz trochę o dziedziczeniu (cały czas w kontekście kuracji odchudzającej) czyli rodzicach i dzieciach. Aby zbytnio nie komplikować: rodzicem wszystkich selektorów jest body zatem jeśli w tym selektorze określimy krój czcionki na np. verdanę to ile nie będziemy zmieniali jej w nast. selektorach zawsze będzie to verdana. Nie ma potrzeby zatem przypisywania tej cechy i wartości do innych selektorów o ile nie jest to niezbędne. (Tak naprawdę "rodzicem rodziców" jest selektor html jednak na użytek tego artykułu przyjmę, że jest nim body)
Przykład:
[code lang="css"]
body {font: normal 12pt/14pt verdana,tahoma,arial,sans-serif}[/code]
Zbędne cechy i wartości:
[code lang="css"]
p {font-weight: normal; font-family: verdana,tahoma,arial,sans-serif; margin:0}[/code]
font-weight: normal; font-family: verdana,tahoma,arial,sans-serif – te cechy i wartości są dziedziczone od rodzica "body" zatem przypisywanie ich ponownie do akapitu jest zbyteczne. Wystarczy:
[code lang="css"]p {margin:0}[/code]
Załóżmy, że określamy kolor czcionki dla akapitu i musimy wewnątrz niego wyróżnić jakiś fragment tekstu czyli:
[code lang="html"]

Piszemy jakiśbardzo ważnytekst.

[/code]

Piszemy jakiś bardzo ważny tekst.

Czerwony kolor czcionki określiłem tylko dla akapitu, wyróşnienie fragmentu tekstu "em" przejęło kolor czcionki od rodzica czyli elementu nadrzędnego i nie ma potrzeby określania jej ponownie. Nie wszystkie cechy podlegaja dziedziczeniu (chociaĹźby cecha "background"). Ten artykuł jednak dotyczy moĹźliwości uporządkowania i odchudzania css i jako taki nie jest kursem posługiwania sie kaskadowymi arkuszami stylĂłw…
No dobra, dla leniwych podaję adres strony z generatorem umoĹźliwiającym uporządkowanie css: http://www.cleancss.com/ – swĂłj kod css wklej to texttarea, zaznacz odpowiednie opcje, kliknij Process CSS i ciesz się "nowym", lekkim i uporządkowanym plikiem css …
…CDN…

* * *

• Komentarze
• Archiwum