Odchudzamy CSS

Index » Kategoria: CSS » Tagi: , .

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:

  1. p {margin:10px}

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.

  1. h1 { margin:0; color:#000;}
  2. h2 { margin:0; color:#000;}
  3. h3 { margin:0; color:#000;}
  4. h4 { margin:0; color:#000;}
  5. h5 { margin:0; color:#000;}

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:

  1. h1,h2,h3,h4,h5 {margin:0; color:#000}

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

  1. p {
  2. font-weight:bold;
  3. font-size:10pt;
  4. line-height:12pt;
  5. font-family:verdana, tahoma, arial, sans-serif;
  6. }

Po odchudzeniu (zgrupowaniu deklaracji):

  1. p { font: bold 10pt/12pt verdana,tahoma,arial,sans-serif }

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

  1. p {font-family:verdana,tahoma,arial,sans-serif}
gdzie sans-serif jest rodzin? wcze??niej okre??lonych font??w.
Kilka przyk??ad??w "odchudzania" css:

Przed kuracj?:

  1. p {
  2. margin-left: 20px;
  3. margin-right: 20px;
  4. margin-top: 30px;
  5. margin-bottom: 30px;
  6. }

Po kuracji:

  1. p {margin: 30px 20px 30px 20px}

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:

  1. p {margin:30px 20px}

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

Przed kuracj?:

  1. td {
  2. border-top: 1px solid #000000;
  3. border-right: 1px solid #000000;
  4. border-bottom: 1px solid #000000;
  5. border-left: 1px solid #000000;
  6. }
  7. #edit: poprawi??em oczywist? pomy??k? w sk??adni :)

Po kuracji

  1. td { border: 1px solid #000}

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:

  1. body {font: normal 12pt/14pt verdana,tahoma,arial,sans-serif}

Zb?dne cechy i warto??ci:

  1. p {font-weight: normal; font-family: verdana,tahoma,arial,sans-serif; margin:0}

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:

  1. p {margin:0}

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

  1. <p style="color:red">Piszemy jaki??<em>bardzo wa??ny</em>tekst.</p>

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…


« Trzy

Brush »

* * *

  • Napisał: doggy — 11/08/2008 @ 09:29

    Przed kuracj?:

    1. 1.
    2.       td {
    3.    2.
    4.       border-top: 1px solid #000000;
    5.    3.
    6.       border-top: 1px solid #000000;
    7.    4.
    8.       border-top: 1px solid #000000;
    9.    5.
    10.       border-top: 1px solid #000000;
    11.    6.
    12.       }

    Powinno chyba byc

    Przed kuracj?:

    1. 1.
    2.       td {
    3.    2.
    4.       border-top: 1px solid #000000;
    5.    3.
    6.       border-left: 1px solid #000000;
    7.    4.
    8.       border-right: 1px solid #000000;
    9.    5.
    10.       border-bottom: 1px solid #000000;
    11.    6.
    12.       }

    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…

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze są moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy może spowodować zablokowanie IP komentującego.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B?dziesz m??g?? prowadzi? sw??j w??asny serwis lub reklamowa? swoje us??ugi. A do tego zaoszcz?dzi? p??ac?c niewielkie pieniadze za du??? przestrze?? dyskow?. Zapraszamy do zapoznania si? ofert? firmy hostingowej TimNet. Dzi?ki naszej wsp????pracy z firm? mamy do zaoferowania 25% bonifikat? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj?cego domy??lne parametry (dope??nienia, marginesy, wielko??? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni??

    Ju?? ponad p???? roku min???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost?pni? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy? czy narz?dy i tkank? ma zdrow?. Wydaje mi si?, ??e zupe??nie inaczej mo??na popularyzowa? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP