CSS tips and tricks - porady CSS - javascript-html5-tutorial.pl

javascript-html5-tutorial.pl

CSS tips and tricks – porady CSS

Październik 26th, 2015

Dominik-W

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ą: