Problemy początkujących z CSS

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Pierwszym i najpoważniejszym jest brak zrozumienia pojęcia kaskady w CSS. Objawia się to głównie złym stylowaniem linków (z powodu ustawienia zasad dla samego <a/> globalnie), stylem obrazków-hiperłączy umieszczonych w akapicie jak dla zwykłego linka.

Dalej - zapominanie o prawidłowym box modelu. Określa on że na szerokość bloku składa się jego margines, obramowanie, dopełnienie i wartość ustawiona za pomocą width. Obejść można to wstawiając dodatkowy blok w środek i jemu aplikując margines bądź pozostałe dwie właściwości. Najprędzej się można z tym zetknąć poznając zasady budowania layoutów na floatowanych divach. Gdy nagle oczekiwane "25% + 75%" > 100% i jedna kolumna zjeżdza pod drugą bądź pojawia się poziomy pasek przewijania.

Ostatnio natknąłem się na łączenie słów określających pozycję obrazka (left, center, right) z odległościami w pikselach, emach, procentach. Ten zapis jest błędny:

background: url(bullet.png) 5px center no-repeat;

Powiadomi nas o tym walidator. Jeśli potrzebujemy odsunąć obrazek tła o ileś pikseli i jednocześnie ustawić wyśrodkowanie, trzeba skorzystać z 50%. A dla right czy bottom - 100%. Poprawny kod:

background: url(bullet.png) 5px 50% no-repeat;

Następnie mamy może nie błąd, ale brak optymalizacji i konsekwencji. Jeśli blok ma kropkowane obramowanie jednopikselowe, w którym tylko dolna linia jest innego koloru to po co pisać:

border-left: 1px dotted #28FF24;
border-top: 1px dotted #28FF24;
border-right: 1px dotted #28FF24;
border-bottom: 1px dotted #FFF;

Skoro można:

border: 1px dotted #28FF24;
border-bottom-color: #FFF;

Podobnie z grubością. Zamiast:

border-left: 3px dotted #28FF24;
border-top: 1px dotted #28FF24;
border-right: 5px dotted #28FF24;
border-bottom: 10px dotted #28FF24;

Wystarczy:

border-style: dotted;
border-color: #28FF24;
border-width: 3px 1px 5px 10px;

Nie jest powiedziane że używanie CSS-a od razu czyni z nas użytkowników standardów. Należy zapoznać się z różnymi materiałami, także specyfikacjami, bo zaczynanie nauki w ciemno i po omacku często kończy się podobną zupą w regułach jak kiedyś <font/> w HTML-u.

Tagi wpisu:

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 02 marca 2006 o 18:04

Kategorie: CSS, Standardy sieciowe

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

D4rky 1 02 marca 2006, 18:08

ostatni przykład można chyba wykonać jeszcze tak
border: 3px 1px 5px 10px dotted #28FF24;

ale mózgu nie oddam za to
Ktos 2 02 marca 2006, 18:10

Jeszcze ja bym dodał nadużywanie klas i brak zrozumienia czegoś takiego jak dziedziczenie właściwości i selektory kontekstowe (tu akurat ja sam byłem przykładem). I używanie CSS-a w atrybutach style znaczników też jest nagminne.

Ale czy zapoznanie się ze zpecyfikacjami W3C jest niezbędne, to ja bym polemizował. Dokumenty te są bardzo ciężkie do czytania.
Riddle 3 02 marca 2006, 18:11

Czasem masz różne artykuły streszczające spece i w sumie o to mi chodziło tam po przecinku. :P
zgryw 4 02 marca 2006, 18:42

oj CSS,oj.. mysle ze po zrobieniu *iluśtam* stron, biorąc pod uwage, że przy każdej z tych stron będe musiał się czegoś douczyć żeby osiągnąć zadowalający efekt, będe w końcu umiał wykorzystywać CSSa na jakimś poziomie... ;) bo to co teraz prezentuje jest, conajmniej, żałosne :P
Jam Łasica 5 02 marca 2006, 19:12

Nie rozumieć drugiego zdania w artykule ;) Na czym dokładnie polega ten problem?
Bellois 6 02 marca 2006, 19:15

To że błędny kod CSS został przekreślony sprawia, że jest on całkowicie nieczytelny.
Riddle 7 02 marca 2006, 19:18

Jam: Przepraszam, zamotałem.
Bellois: Zadziwiająca jest zdolność czepiania się, żeby nie powiedzieć, przypieprzania się, do rzeczy zupełnie nieważnych, nieistotnych, bo przecież uwypuklonych w tekście i do tego nadmienionych jako błędne przez co i niezachęcających do kopiowania, przez niektóre osoby. I Ty w tym przodujesz.
Bellois 8 03 marca 2006, 16:45

Kod powinien być czytelny. Jeśli nie jest, to jest to błędne. Nie zmienisz tego atakując mnie.
Dot 9 03 marca 2006, 19:10

IMHO przekreślenie tego jest bardzo słuszne. Przecież jak ktoś będzie szukał rozwiązania czegoś takiego, znajdzie jogg Riddle'a (dla przykładu) i trafi na ten wpis. No i teraz pierwszym kodem, który o tym wspomina, jest ten błędny. Gdyby nie był przekreślony, statystycznie z 50% ludzi by go skopiowało uważając, że ktoś taki jak Riddle poleca to rozwiązanie. Oczywiście bez przeczytania całości notki.
hash 10 03 marca 2006, 20:22

IMO najbardziej wartosciowy jest pierwszy link w tym wpisie ;]
Puck 11 05 marca 2006, 17:05

"Ostatnio natknąłem się na łączenie słów określających pozycję obrazka (left, center, right) z odległościami w pikselach, emach, procentach. Ten zapis jest błędny" - Riddle
"Combinations of keyword, length and percentage values are allowed, (e.g., '50% 2cm' or 'center 2cm' or 'center 10%')." - podając za w3.

Czego tu nie rozumiem? Kult walidatora, który jak wiemy sam ma błędy?
wil 12 14 marca 2006, 16:16

"Objawia się to głównie złym stylowaniem linków (z powodu ustawienia zasad dla samego <a/> globalnie)" Zaintrgował mnie ten fragment. O co dokładnie chodzi ? W miarę możliwości prosiłbym o wyjaśnienia

Informacje i hiperłącza

Informacje o wpisie

Wpisy archiwalne

Dzięki!

Komentarze

Dodaj komentarz