
Pracując ciągle między innymi z CSS, tworzy się lub znajduje ciekawe rozwiązania różnych zadań lub napotkanych problemów.
Porady CSS
1. Cross-browser CSS word break – przełamanie zbyt długiego tekstu
Przykładowo gdy tworzymy front-end dla chatu on-line, i mamy div-y na poszczególne wiadomości. Użytkownik pisze długi ciąg, długi adres URL, lub inny ciąg nieprzerwanych znaków. Taki tekst nie „zawinie się” i wyjdzie w linii prostej poza nasz div.
Może przetwarzać ciągi w naszym języku programowania, jednak bezboleśnie można to załatwić w CSS. Nasz div musi otrzymać style CSS, które się tym zajmą:
.word-break { word-break: break-all; word-wrap: break-word; -ms-word-break: break-all; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
To zapewni poprawne wyświetlenie się nietypowego tekstu w naszym elemencie.
2. Dwa elementy obok siebie
W HTML i czystym CSS można po prostu napisać coś takiego:
<div> <div style="float: left">Left<div> <div style="float: right">Right<div> </div>
3. Centrowanie horyzontalne (poziome)
Aby wycentrować element z poziomie, nadajmy mu styl margin: 0 auto
#my-div { width: 800px; margin: 0 auto }
Taki element zostanie wycentrowany względem swojego elementu rodzica.
Aby wycentrować elementy wewnątrz danego elementu, nadajmy mu po prostu style text-align: center
<div style="text-align: center"> <p>AAAAA</p> <p>BBBBB</p> </div>
4. Zaokrąglone rogi elementu
Skorzystajmy po prostu z CSS border-radius:
.element { border-radius: 5px }
Zostanie ustawiony promień 5px dla wszystkich 4 rogów.
Warto jednak zastosować style cross-browser, dodając właściwości typowe dla przeglądarek opartych o Webkit i Mozilla:
.element { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
Oczywiście istnieją właściwości do zaokrąglania jedynie wybranych rogów, np. lewy górny:
.element { border-top-left-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-top-left; }
5. Komentarze warunkowe
Niestety *niektóre* przeglądarki wciąż wymagają specjalnego traktowania, jak dołączenie stylów CSS lub skryptów JS, które to jednak są potrzebne tylko w przypadku *tej* przeglądarki.
Z pomocą przyjdą nam komentarze warunkowe CSS:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="special-care.css" /> < ![endif]-->
Powyższy zapis oznacza dołączenie pliku special-care.css tylko w przypadku przeglądarki IE.
Możemy tutaj określać wersje:
<!--[if IE 6]> - targets IE6 only --> <!--[if gt IE 6]> - targets IE7 and above --> <!--[if lt IE 6]> - targets IE5.5 and below --> <!--[if gte IE 6]> - targets IE6 and above --> <!--[if lte IE 6]> - targets IE6 and below -->
6. 100% Height
Proste rozwiązanie dla przypadku, gdy chcemy aby nasz element (np. pionowy div na lewe / prawe menu w aplikacji web) zajmował 100% wysokości strony, tak aby nasz element był „przyklejony” zarówno do nagłówka jak i stopki strony.
Definiujemy height 100% zarówno dla elementów html oraz body, jak i dla naszego elementu:
html, body { height: 100% } ... #our-div-left { min-height: 100% }
7. Usuwanie obramowania z linków-obrazków
Zwykle domyślnie takim elementom nadawana jest irytująca ramka, której bardzo łatwo się pozbyć:
a image { border: 0 } /* LUB a image { border: none } */
8. Visibility vs Display
Czego mam użyć? Różnica jest bardzo prosta:
{ visibility: hidden } – tutaj element zostanie schowany, pozostanie jednak pusta przestrzeń w jego miejscu
Z kolei w przypadku:
{ display: none } – zarówno element jak i przestrzeń po nim zostaną ukryte.
9. Cross-Browser Transparency
Nie wszystkie przeglądarki wspierają właściwość opacity, może więc przydać się nam poniższy kod:
.element { filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Mozilla */ /* Older versions of Safari and khtml-based browsers */ -khtml-opacity: 0.5; opacity: 0.5; /* Standard */ }
10. Style dla aktywnego elementu formularza
Dla poprawy usability możemy chcieć nadać style dynamicznie, dla elementu formularza, w którym aktualnie znajduje się użytkownik. Pseudo-selektor :focus przyjdzie nam z pomocą:
input:focus { border: 2px solid #f00; }
Dzięki temu wyróżnia się input, w którym pracuje użytkownik.
Porady CSS – podsumowanie
W dzisiejszym artykule to wszystko. Mam nadzieję że zebrane dziś 10 porad CSS przyda się czasem w szybszym opracowywaniu dobrego front-endu.