internet - Kurs HTML i CSS
HTML5 / Możliwy koniec linii <wbr>(interpretuje: Internet Explorer 6-7 ale nie 8-11, Firefox 2, Opera 10, Chrome 4) <wbr> Normalnie przeglądarki zawijają długie linijki tekstu, jeśli nie mieszczą się w szerokości okna. Jednak w niektórych warunkach przełamanie tekstu może nie być możliwe. Wtedy najczęściej pojawi się poziomy suwak do przewijania strony. Z takim przypadkiem możemy mieć do czynienia wewnątrz znacznika PRE, gdy zablokujemy zawijanie tekstu przy pomocy CSS albo gdy w długiej linijce nie umieścimy żadnego białego...
- HTML5 / Autouzupełnianie <datalist>
(interpretuje: Internet Explorer 10, Firefox 4, Opera 10, Chrome 20) <input list="identyfikator"> <datalist id="identyfikator"> <option value="wartość1"> <option value="wartość2"> ... </datalist> Większość przeglądarek posiada funkcję tzw. autouzupełniania elementów formularzy. Jeżeli użytkownik wpisze coś w formularzu, a potem go wyśle, to kiedy będzie następnym razem wypełniał ten sam formularz, przeglądarka wyświetli mu podpowiedzi w postaci wartości, które wcześniej wpisywał w...
- HTML5 / Pasek postępu <progress>
(interpretuje: Internet Explorer 10, Firefox 6, Opera 11.5, Chrome 8) Nieokreślony stopień ukończenia: <progress>alternatywa</progress> Pasek postępu: <progress value="współczynnik">alternatywa</progress> <progress value="wartość" max="maksimum">alternatywa</progress> alternatywa Alternatywna zawartość, wyświetlana w przeglądarkach, które nie obsługują HTML5. Powinno się tam umieścić np. tekst "Proszę czekać..." albo "Ukończono: 50%". współczynnik Wartość z przedziału od 0.0 (stopień...
Układ elastyczny CSS / Kontener elastyczny {display: flex inline-flex}(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Układ elastyczny w bloku: selektor { display: flex } Układ elastyczny w linii: selektor { display: inline-flex } Wstawienie jednej z powyższej deklaracji sprawia, że dzieci elementu (znaczniki które bezpośrednio się w nim zawierają), wyznaczonego podanym selektorem [zobacz: Wstawianie stylów], będą układane w nim w sposób elastyczny. Tak tworzy się tzw. kontener elastyczny (ang. flex container), w którym dzieci...
- Układ elastyczny CSS / Przepływ elastyczny {flex-direction, flex-wrap, flex-flow}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {flex-direction, flex-wrap, flex-flow} Kierunek elastyczny {flex-direction} Zawijanie elastyczne {flex-wrap} Atrybuty mieszane przepływu elastycznego {flex-flow} Kierunek elastyczny {flex-direction} selektor { flex-direction: kierunek } Selektorem musi być kontener elastyczny. Kierunek określa sposób układania kolejnych elementów wewnątrz układu elastycznego: row - elementy będą układane w wierszach...
- Układ elastyczny CSS / Kolejność {order}
...niewidomej, która używa przeglądarki z syntezatorem mowy, prawdopodobnie korzystniej będzie, jeśli zapoznając się z katalogiem produktów w sklepie internetowym, najpierw usłyszy informacje o nazwie produktu, a potem jego opis. Zdjęcie jest w tym przypadku zupełnie nieważne, dlatego najlepiej jest wstawić je na końcu. Jednak dla użytkowników z dobrym wzrokiem właśnie zdjęcie może okazać się najważniejsze. Umieszczając je w kontenerze elastycznym, a następnie określając dla niego styl "order...
- Układ elastyczny CSS / Justowanie zawartości {justify-content}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) selektor { justify-content: justowanie } Selektorem może być kontener elastyczny. Justowanie: flex-start - do początkowej krawędzi kontenera (domyślnie) flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie space-between - równe odstępy między elementami space-around - równa przestrzeń wokół elementów Polecenie steruje justowaniem elementów kontenera elastycznego, gdy jest on zbyt duży, aby został...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {flex-grow, flex-shrink, flex-basis, flex} Rozciągnięcie elastyczne {flex-grow} Ściśnięcie elastyczne {flex-shrink} Baza elastyczna {flex-basis} Atrybuty mieszane elastyczności {flex} Rozciągnięcie elastyczne {flex-grow} selektor { flex-grow: rozciągnięcie } Selektorem mogą być dzieci kontenera elastycznego (ale nie sam kontener). Rozciągnięcie jest wyrażone liczbą naturalną (większą lub równą zero)...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) Spis treści {align-items, align-self} Wspólne wyrównanie wiersza {align-items} Indywidualne wyrównanie wiersza {align-self} Wspólne wyrównanie wiersza {align-items} selektor { align-items: wyrównanie } Selektorem może być kontener elastyczny. Wyrównanie: flex-start - wyrównanie wiersza do początkowej krawędzi kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wiersza (dla tekstu w języku...
- Układ elastyczny CSS / Wyrównanie wierszy {align-content}
(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome) selektor { align-content: wyrównanie } Selektorem może być kontener elastyczny, którego elementy zostały ułożone w wielu wierszach. Wyrównanie: flex-start - wyrównanie wierszy do początkowej krawędzi kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wierszy (dla tekstu w języku polskim - w pionie) space-between - równe odstępy między wierszami space-around - równa przestrzeń wokół wierszy...