7 ważnych wskazówek dotyczących układu CSS

Najtrudniejszą rzeczą w CSS do poprawienia jest układ witryny. Oto kilka wskazówek, jak sobie z tym poradzić. Niektóre z tych wskazówek nie są niczym nowym ani nauką o rakietach, ale miejmy nadzieję, że zaoszczędzą komuś trochę kłopotów!

Wskazówka 1: Przed rozpoczęciem pracy usuń domyślne ustawienia dopełnienia i marginesów.
Różne przeglądarki mają różne domyślne rozmiary marginesów i dopełnienia, dlatego warto zacząć od czystej karty, że tak powiem. Użyj tego polecenia:

*
{
margines: 0;
wyściółka: 0;
granica: 0;
}

aby wyczyścić wszystkie domyślne ustawienia marginesów i dopełnienia. Zwróć także uwagę na obramowanie, które jest ustawione na 0. Pamiętaj, że jeśli to zrobisz, pozbędziesz się również nieznośnych fioletowych obramowań wokół klikalnych obrazów, chociaż niektórzy twierdzą, że fioletowe obramowanie jest niezbędne ze względu na dostępność i użyteczność. Jednak wielu osobom nie podobają się fioletowe okrągłe obrazy z obramowaniem i jest to jeden ze sposobów, w jaki można się ich pozbyć za jednym zamachem, bez konieczności ustawiania obramowanie obrazu = 0 dla każdego obrazu (co w każdym przypadku jest sprzeczne ze ścisłymi zasadami dotyczącymi znaczników).

Wskazówka 2: Aby wyśrodkować układ, użyj elementu div kontenera, który pomieści całą zawartość
Zadeklaruj to w następujący sposób:

#pojemnik

{
margines: 0 auto;
szerokość: xxxpx;
}

Jest tu kilka punktów, na które warto zwrócić uwagę. NIE deklaruj szerokości jako 100%. To pokonuje cały obiekt, ponieważ wystarczy zadeklarować podelementy w kontenerze, a następnie wyśrodkować JE za pomocą margines: 0 auto. Jest to BARDZO ZŁE, ponieważ oznacza, że ​​zamiast jednorazowo deklarować układ centralny, będziesz musiał zadeklarować go w wielu miejscach dla każdego elementu w kontenerze.

Wskazówka 3: Pracuj od góry do dołu
Dosłownie rozpocznij pracę nad układem CSS, zaczynając od najwyższych elementów projektu, a także „najwyższych” elementów w kodzie HTML, takich jak treść, a także głównych kontenerów.

Zadeklaruj swoje polecenia CSS na najwyższym możliwym poziomie i spróbuj zadeklarować coś tylko raz i pozwól, aby było to kaskadowane. Zastępuj polecenia niższego poziomu tylko wtedy, gdy jest to absolutnie konieczne. Zapobiega to tworzeniu szczegółowego pliku CSS, który byłby trudny w utrzymaniu i zrozumieniu. Na przykład, jeśli masz {margines: 0 auto} ustawienia każdego elementu podrzędnego w kontenerze – masz kłopoty.

Wskazówka 4: Dokumentuj swoje działania i do debugowania użyj Firebuga i przeglądarki Firefox
Nie piszesz swojego kodu CSS tylko dla siebie, pewnego dnia jakiś biedak będzie musiał go zdebugować. Wprowadź wiele komentarzy w pliku CSS, aby wyjaśnić, dlaczego robisz rzeczy w określony sposób.

Dopasowując się do tego, może się okazać, że będziesz musiał naprawiać czyjś CSS częściej, niż myślisz (lub nawet swój własny, jeśli o to chodzi). Użyj dodatku Firebug do przeglądarki Firefox, aby debugować swój CSS. Jest to rozwiązanie ratujące życie, ponieważ umożliwia wgląd w to, gdzie dokładnie Twój projekt może zostać uszkodzony i dlaczego.

Jedynym problemem jest to, że Twój projekt może działać idealnie w przeglądarce Firefox, ale nie w IE5, IE6 lub IE7. To prowadzi nas do następnej wskazówki.

Wskazówka 5: Zdecyduj, dla jakich przeglądarek chcesz zbudować swój CSS i przetestuj go od początku
Niektórzy puryści nalegają, aby Twoja witryna działała we wszystkich możliwych przeglądarkach, inni sprawiają, że działa ona tylko w „głównych” przeglądarkach. Skąd wiesz, które przeglądarki są najczęściej używane? Po raz kolejny z pomocą przychodzą Szkoły W3.

Na poniższej stronie możesz zobaczyć, które przeglądarki są najpopularniejsze: http://www.w3schools.com/browsers/browsers_stats.asp. Z tej strony widać, że coś takiego jak IE5 jest używane tylko przez około 1.1% przeglądarek. Od Ciebie zależy, czy uznasz, że warto zbudować swój CSS tak, aby był kompatybilny z tą przeglądarką, czy też będziesz po prostu testował swoją kompatybilność na przykład z IE6, IE7 i Firefoxem. Cokolwiek robisz, rozpoczynając tworzenie CSS, zacznij od góry i w miarę upływu czasu testuj każde ustawienie w każdej przeglądarce. Nie ma nic gorszego niż zbudowanie doskonałej strony internetowej w Firefoksie, a zaraz po zakodowaniu 1000-liniowego pliku css okazuje się, że jest on uszkodzony w IE6. Następnie debugowanie i naprawianie kodu po fakcie jest koszmarem.

Wskazówka 6: Oto zawstydzająca mała wskazówka dotycząca naprawiania CSS w IE6 lub IE7
Załóżmy, że Twój projekt działa doskonale w przeglądarce Firefox, ale jest uszkodzony w IE6. Nie możesz użyć Firebuga do ustalenia, gdzie może być problem, ponieważ DZIAŁA w przeglądarce Firefox. Nie masz luksusu używania Firebuga w IE6, więc jak debugować arkusz stylów IE6 lub IE7? Często stwierdzałem, że dodawanie pomaga {border: 1 px jednolity czerwony} or {border: 1 px jednolity fioletowy} do problematycznych elementów. W ten sposób często można zobaczyć, dlaczego pewne elementy nie mieszczą się w dostępnej przestrzeni. To żenująca mała wskazówka, ponieważ jest tak prymitywna i prosta, ale działa!

Wskazówka 7: Zrozum pływaki
Zrozumienie pływających elementów jest niezbędne, szczególnie w kontekście umożliwienia działania elementów pływających w różnych przeglądarkach!

Zasadniczo elementy takie jak div są przesuwane w lewo lub w prawo (nigdy na górę lub na dół, tylko na boki). Oto kilka rzeczy, które należy wziąć pod uwagę w przypadku elementów pływających. Każdy element pływający musi mieć wyraźnie określoną szerokość. Jeśli używasz pływających elementów div do utworzenia układu z 3 lub 2 kolumnami, raczej określ szerokości w procentach, a nie w stałych szerokościach, a jeśli używasz wartości procentowych, upewnij się, że wartości procentowe nie sumują się do 100 %, często powoduje to, że skrajna prawa kolumna spada poniżej reszty, wyraźnie wskazując, że próbujesz zmieścić coś w dostępnej przestrzeni, która jest dla niej za szeroka. Raczej używaj wartości procentowych, które sumują się nieco poniżej 100%, np. 25%, 49%, 24% dla lewej kolumny, środkowej kolumny i prawej kolumny.

Elementy pływające mogą być niezwykle trudne do zrozumienia i warto poświęcić trochę czasu na dobre strony, które zawierają szczegółowe wytyczne i wskazówki, takie jak Pozycja jest wszystkim stronie internetowej.

Wnioski
Miejmy nadzieję, że te wskazówki CSS dotyczące układu pozwolą Ci zaoszczędzić trochę czasu i wysiłku, gdy będziesz musiał przesłać projekt bez tabeli za pomocą paneli! To był post gościnny napisany przez Christine Anderssen.