Odchudzamy CSS
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…
* * *
-
Napisał: doggy — 11/08/2008 @ 09:29
Przed kuracjÄ :
[code lang="css"]
1.
td {
2.
border-top: 1px solid #000000;
3.
border-top: 1px solid #000000;
4.
border-top: 1px solid #000000;
5.
border-top: 1px solid #000000;
6.
}
[/code]
Powinno chyba bycPrzed kuracjÄ :
[code lang="css"]
1.
td {
2.
border-top: 1px solid #000000;
3.
border-left: 1px solid #000000;
4.
border-right: 1px solid #000000;
5.
border-bottom: 1px solid #000000;
6.
}
[/code]
btw, Ĺwietna strona 🙂 -
Napisał: zama — 12/08/2008 @ 09:05
DziÄki za zwrĂłcenie uwagi 🙂 Tak to jest jak siÄ trochÄ bezmyĹlnie uĹźywa ctrl+a, ctrl+c i ctrl+v tylko po to, aby byĹo szybciej…