chevron-left chevron-right

[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.

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

Przykład text-overflow z CSS

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;
}

Box-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;
}
Przykład box-sizing

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;
}

Image 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.

Podsumowanie

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.

  • Z tym box-model to nie do końca, tak – de facto sztuczka, którą zaprezentowałeś powoduje interpretację wymiarów w sposób jaki miało to miejsce w Internet Explorerze 6 i starszych 🙂 Akurat tutaj Microsoft miał lepszy pomysł niż W3C.

  • Piotr Nalepa

    co nie zmienia faktu, że jest to sposób zdecydowanie wygodniejszy w użyciu

  • Volix

    Masz literówkę w kodzie box-model, dokładniej chodzi o background

  • Piotr Nalepa

    dzięki za zwrócenie uwagi na to 🙂

  • taki_se_koder

    Dokładnie chrom i explorer swoje opera firefox swoje. Wiadomo że ten standardowy układ pudełkowy to jakies nieporozumienie i zmusza t ociaglego liczenie dodawani i odejmowanie porażaka. box-sizing: border-box; jest owiele bardziej intuicyjny nie musze ciagle liczyc zmieniajac paddingi czy rozmiar bordera i przeliczac poprawiac.