[CSS] Garść przydatnych tricków CSS

W dzisiejszym wpisie zostanie zaprezentowanych kilka ciekawych tricków CSS, które można wykorzystać podczas tworzenie layoutu stron WWW. Będą one obejmowały różne zagadnienia.

Section 1Text-overflow: ellipsis - czyli jak zmieścić zbyt długi tekst w małej przestrzeni

Czasami zapewne spotykasz się z problemem, że potrzebujesz zmieścić cały tekst w jednej linijce. Bywa że, tekst jest po prostu za długi aby się zmieścił w niej i należałoby skrócić. Więc zostają 2 wyjścia: napisać krótszy tekst lub go obciąć.
Za pomocą CSS i text-overflow jesteśmy w stanie to zrobić bez korzystania z jakichkolwiek innych języków.

1
2
3
4
5
6
7
8

h3 {
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
}

Section 2Box-sizing - koniec problemów z modelem pudełka w CSS

Wielokrotnie, podczas tworzenia stron WWW spotykamy się z problemem obliczeń szerokości i wysokości elementów, tak aby wszystko do siebie pasowało. Wpływ na szerokość elementu miały zarówno padding jak i border. Od dzisiaj można zapomnieć, że taki problem w ogóle istniał, ponieważ możemy zastosować box-sizing, który będzie zachowywał wybraną szerokość, a padding i border będą się automatycznie zawierały w szerokości elementu.

1
2
3
4
5
6
7
8
9
10
11
12

#box-sizing {
	width: 300px;
	padding: 20px;
	height: 200px;
	display: block;
	background: #eee;
	border: 1px solid #ddd;
	overflow: hidden;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

Dobrym zwyczajem jest ustawienie box-sizing dla wszystkich elementów strony WWW, lecz należy pamiętać o tym, że w takich przypadkach dodatki tworzone przez osoby trzecie mogą wyglądać nie tak jak powinny, ponieważ opierały się o stary model pudełka CSS. W takiej sytuacji, należy przebudować kod CSS tak, aby uwzględniał nową rzeczywistość.

1
2
3
4
5

* {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

Section 3Image replacement - Nowy sposób na ukrywanie tekstu pod obrazkiem

Czasami, tworząc strony chcielibyśmy wykorzystać obrazki zamiast tekstu, np. w menu. Zazwyczaj wykorzystywaliśmy technikę:

1
2
3
4
5
6
7
8

.stary-image-replacement {
	display: block;
	width: 300px;
	height: 200px;
	line-height: 200px;
	overflow: hidden;
	text-indent: -1000px;
}

Co działało fajnie, ale jednak zmuszało przeglądarki do tworzenia ponadwymiarowych boxów, które potem były ukrywane.
Teraz możemy skorzystać z innej techniki, która pozwoli na uniknięcie problemu renderowania zbyt dużych kontenerów:

1
2
3
4
5

.nowy-image-replacement {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

Tym sposobem, uzyskujemy ten sam efekt co wcześniej, lecz z mniejszą ilością kodu CSS oraz unikamy problemu renderowania wielkich przestrzeni poza kontenerami.

Section 4Podsumowanie

Powyżej, przedstawiłem kilka przydatnych tricków CSS, które można wykorzystywać na codzień podczas pisania kodu CSS. Pozwalają one uniknąć wielu niepotrzebnych problemów, które mogłyby się pojawić podczas tworzenia stron WWW.
Wyżej wymienione tricki były testowane przeglądarkach IE8, IE9, Opera, Chrome i Firefox.
Mam nadzieję, że uznasz je za przydatne w swojej pracy. Jeśli uważasz, że brakuje jakiegoś ciekawego rozwiązania, to napisz w komentarzu, a dodam je do tekstu z notką o autorze sugestii.