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:

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.

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:

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

Po odchudzeniu (zgrupowaniu deklaracji):

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

gdzie sans-serif jest rodzin�? wcze??niej okre??lonych font??w.
Kilka przyk??ad??w "odchudzania" css:

Przed kuracj�?:

Po kuracji:

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:

W tym zapisie 30px dot. marginesy g??rnego i dolnego a 20px prawego i lewego.
Kolejny przyk??ad:

Przed kuracj�?:

Po kuracji

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 (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:

Zb�?dne cechy i warto??ci:

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:

Za??????my, ??e okre??lamy kolor czcionki dla akapitu i musimy wewn�?trz niego wyr????ni�? jaki?? fragment tekstu czyli:

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: 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…

---

* * *

• Miniblog
• Komentarze
• Archiwum