strony - Kurs HTML i CSS
Układ wielokolumnowy CSS / Przełamanie kolumny {break-before, break-inside, break-after}...się wcześniej, aby tytuł znalazł się na początku następnej. Taki efekt zapewnimy poprzez nadanie stylu: h1 { break-after: avoid-column } Z drugiej strony możemy chcieć wymusić przełamanie kolumny po zakończeniu w tekście sekcji, czyli np. zaraz po poziomej linii: hr { break-after: column } Wreszcie w pewnych przypadkach może nam zależeć, aby wybrany fragment tekstu - np. akapit - nigdy nie został przełamany do następnej kolumny: p { break-inside: avoid-column } Przykład {break-after} To...
- Obramowanie CSS / Szerokość obramowania obrazkowego {border-image-width}
...jakby była wstawiona w tle. border-image-source: url(punkt.gif); border-image-slice: 15; border-image-width: 10px; border-width: 15px Z drugiej strony, ustalając szerokość tradycyjnego obramowania większą niż szerokość obramowania obrazkowego, możemy odsunąć grafikę krawędzi od zawartości tekstowej elementu - podobnie jak to ma miejsce w przypadku marginesu wewnętrznego. border-image-source: url(punkt.gif); border-image-slice: 15; border-width: 15px Dla porównania - tak wygląda ten sam...
- Obramowanie CSS / Nawis obramowania obrazkowego {border-image-outset}
...marginesu będzie niewystarczająca, grafika z nawisu obramowania może nawet wejść pod zawartość sąsiedniego elementu lub schować się poza granicami strony. Dlatego ustalając nawis obramowania obrazkowego zawsze warto jednocześnie zadbać o nadanie odpowiedniej wartości marginesu. Jeżeli "border-image-slice: 124", to wartość nawisu obramowania obrazkowego można zilustrować następująco: Źródło: CSS Backgrounds and Borders Module Level 3 Przykład {border-image-outset} border-image-source...
HTML5 / Nawigacja <nav><nav>...</nav> Reprezentuje sekcję strony, która zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem NAV, zwykle bardziej właściwy do tego będzie element...
- HTML5 / Możliwy koniec linii <wbr>
...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 znaku (np. spacji) ani innego, po którym normalnie może nastąpić przełamanie wiersza. Znacznik WBR daje przeglądarce możliwość przełamania wiersza w tym miejscu...
- HTML5 / Otwierany panel <details, summary>
...jest na początku wyświetlić mu tylko podstawowe dane, a do szczegółów dać dostęp dopiero, kiedy zyskamy jego zainteresowanie konkretnym elementem strony. Do tej pory jedynym sposobem wstawienia takiego otwieranego panelu było użycie dynamicznych skryptów JavaScript. HTML5 pozwala to wykonać bez ich potrzeby. W stanie zamkniętym, przeglądarka zamiast treści wpisanej w znaczniku, wyświetla tylko nagłówek panelu z napisem podanym przez nas za pomocą elementu SUMMARY. Co ciekawe, możliwe jest...
Polityka prywatności...raz dokonanego przez użytkownika - np. ustawienie rodzaju wyszukiwarki identyfikacja przeglądarki internetowej pomiędzy kolejnymi odwiedzinami strony - np. logowanie Przetwarzanie niezbędne do celów wynikających z prawnie uzasadnionych interesów realizowanych przez administratora zapisywanie adresu IP - w celu zapobiegania oszustwom i łamaniu prawa Okres przechowywania danych Dane osobowe będą przechowywane przez 1 rok bądź na czas trwania sesji (do chwili zamknięcia okna...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...Może się zdarzyć, że w jednym wierszu kontenera elastycznego mogłoby się zmieścić więcej elementów niż mamy zapewnionych. Wtedy zwykle z prawej strony pozostaje wolna przestrzeń. Możemy jednak sprawić, aby w takiej sytuacji szerokość elementów elastycznie dopasowała się w taki sposób, aby wypełniły całą dostępną przestrzeń kontenera. Jeżeli chcemy, aby wszystkie elementy zostały rozciągnięte równomiernie, wystarczy każdemu przypisać styl "flex-grow: 1". Możemy też zadecydować, aby np...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...ten prosty mechanizm. Zaimplementowana w przeglądarce obsługa jednej właściwości przy jednoczesnym braku innych może poważnie popsuć wygląd strony, a w przypadku skrajnym nawet całkowicie uniemożliwić jej odbiór przez czytelnika. Właście na taką ewentualność zostały stworzone warunkowe reguły stylów (zapytania właściwości - ang. feature queries). Pozwalają one dodać do arkusza deklaracje, które zostaną użyte przez przeglądarkę tylko jeżeli potrafi ona obsłużyć (albo nie potrafi...
Wstęp do JavaScript i ECMAScript / Jak osadzić skrypt JavaScript na stronie?...w tle plik z kodem skryptu (który może być czasem sporych rozmiarów), pozwalając w tym czasie użytkownikowi normalnie rozpocząć czytania treści strony, na nic nie czekając. <script async src="plik.js"></script> Podobnie działa atrybut defer, jednak wtedy przeglądarka rozpoczyna wczytywanie skryptu dopiero po załadowaniu pełnego kodu HTML dokumentu. Może to potrwać nieco dłużej niż w przypadku użycia atrybutu async. XHTML W języku XHTML skrypty osadzamy następująco: <script...