JustPaste.it

Css: Sztuczki które chciałbym znać, zanim zacząłem programować.

Kilka słów wstępu

W swojej pracy wykorzystuję CSS od naprawdę długiego czasu. Pomimo faktu, że wydaje się on być stosunkowo dość prosty do opanowania, zawsze istnieje parę ciekawostek i sztuczek które warto poznać. Ja również ciągle się uczę (chociażby dzięki wspaniałym książkom). Postanowiłem poświęcić swój czas i stworzyć pomocną listę sztuczek CSS, które z pewnością okażą się przydatne zarówno dla nowicjuszy jak i doświadczonych programistów. Być może wiele z nich już znacie, warto sobie je jednak przypomnieć. Mam nadzieję, że mój artykuł będzie zrozumiały i pomoże wielu z was.

Używaj Overflow: Hidden; aby wyczyścić oblewanie

Sam do niedawna stosowałem zbędne divy resetujące oblewanie. Mój kod wyglądał wtedy mniej więcej tak:

1

2

3

4

5

6

.clear { clear: both; }

<div id="kolumny">

<div id="kolumna1"></div>

<div id="kolumna2"></div>

<div class="clear"></div>

</div>

Te czyszczące oblewanie pojemniki sprawdzają się perfekcyjnie, ale są one również całkowicie zbędne. Zamiast tego można zastosować atrybut overflow:hidden dla kontenera z divami jak na przykładzie.

1

2

3

4

5

#columns { overflow: hidden; }

<div id="kolumny">

<div id="kolumna1"></div>

<div id="kolumna2"></div>

</div>

 

Grupowanie elementów

Jedną z mantr kodowania 101 jest utrzymanie kodu tak czystego i spójnego, jak to tylko możliwe. Poprawia to jego czytelność i wydajność. Jeżeli w Twoim kodzie jest kilka elementów, które odpowiadają za to samo zdarzenie, warto połączyć je. Więc zamiast…

1

2

h2 { color: #fff; font-weight: bold; }

h3 { color: #fff; font-weight: bold; }

 

Możesz pogrupować te element w ten sposób:

1

h2, h3 { color: #fff; font-weight: bold; }

 

Komentarze są ważne

Wiele ze stron, które wykonałem, wymagały jedynie mojej pracy jako programisty. Ostatnią rzeczą, którą chcę zrobić podczas kodowania jest zatrzymanie się i dodawanie komentarzy. Jednak, gdy muszę wrócić do kodu po latach, nie mam kompletnie pojęcia co chciałem osiągnąć. Dzięki dodawaniu logicznych komentarzy, dochodzenie do tego o co Ci chodziło pisząc konkretny kod zajmie Ci znacznie mniej czasu. Nawet jeżeli ktoś inny będzie zaszczycony możliwością edycji Twojego kodu, będzie miał znacznie ułatwione zadanie. Stracisz kilka godzin, zyskasz co najmniej wizerunek profesjonalisty.

Dodaj bazowy styl dla tagu Body

Znowu wracamy do wspomnianej przeze mnie zasady, aby pisać jak najmniej kodu. Lubię na samym początku zdefiniować style bazowe strony, nadając odpowiednie parametry dla tagu „body”. Oto przykład ilustrujący o czym mówię (często powtarzam, że dobry przykład znaczy więcej niż tysiąc słów):

1

2

3

body { color: #FFF; font: normal .7em/14 arial, helvetica, sans-serif; }

<!-- W tym momencie ustawiam wagę i rozmiar w procentach -->

h2 { font-size: 140%; font-weight: bold; }

 

Wykorzystuj resetowanie styli CSS

Jedną z trudniejszych lekcji CSS, którą musi przejść każdy początkujący programista, jest nauka różnicy w przetwarzaniu kodu przez różne przeglądarki (szczególnie jeżeli chodzi o marginesy i dopełnienia). Najlepszym sposobem na zwalczenie tych niedogodności jest zaczęcie od implementacji wybranego resetu CSS.  Jest ich naprawdę wiele. Tutaj wybór pozostawiam wam. Końcem końców sami możecie wygenerować globalne resety jak na przykładzie:

1

* { margin: 0; padding: 0; }

 

Bardziej zaawansowani programiści wiedzą, który resetu wykorzystać, aby strona działała odpowiednio na każdej przeglądarce. Pozwala to na przyśpieszenie działania strony i uniknięcie przeładowania kodem.

Wykorzystaj skrótowy CSS

Oto znowu ja marudzący o pisaniu jak najmniejszej liczby kodu :) Oto przykład:

1

2

3

4

5

p { font-family: verdana, helvetica, sans-serif;

font-size: .7em;

line-height: 1.4em;

margin-bottom: 15px;

margin-top: 15px; }

 

Po co pisać tyle kodu!? Przecież w zupełności wystarczy

1

p { font: normal .7em/1.4em arial, verdana, sans-serif; margin: 15px 0; }

 

IE Nie daje rady (wciąż)

Ten fakt jest znany wszystkim wszem I wobec (czy oby na pewno?). Muszę jednak przyznać, że gdy zaczynałem nie miałem pojęcia skąd ta niechęć wśród programistów. Po spędzeniu godzin nad tworzeniem strony wyglądającej dobrze pod Internet Explorerem, szybko zdałem sobie sprawę jak bardzo nienawidzę tej części pracy. Co prawda, ostatnio jakość IE znacznie się poprawiła, wciąż jednak jest z nim wiele problemów. Najlepszą radą jakiej mogę udzielić Ci w tym temacie jest walka do upadłego (być może uda Ci się ujarzmić bestię:)). Staraj się używać haków tak rzadko jak to możliwe. Dziękuj Bogu, że coraz mniej osób korzysta z tego reliktu. Istnieje możliwość zdefiniowania styli specjalnie dla IE, wygląda to następująco:

1

2

3

<!--[if IE]>

<link rel="nofollow" href='' type="text/css" />

<![endif]-->

 

Wykorzystuj nowoczesny kod

Tylko dlatego, że IE jest daleko w tyle, nie znaczy wcale że musisz zrezygnować z technologii jak CSS3 czy HTML5. Idź z duchem czasu, stosuj zaokrąglenia rogów w CSS, dodawaj bez wahania cienie do boxów, wykorzystuj translacje itp. Czy Twoja strona musi wyglądać identycznie na wszystkich przeglądarkach? Odpowiedź znajdziesz tutaj!

 Autor: Bartosz Skiba, programista Con Design - Strony www Szczecin