przeglądarka - Kurs HTML i CSS
HTML5 / Autouzupełnianie <datalist>...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 wybranych polach. Taki mechanizm jest bardzo wygodny, ponieważ pozwala zaoszczędzić użytkownikowi sporo czasu na wprowadzaniu wciąż tych samych danych. Twórcy stron WWW również mogą wykorzystać ten system, dodając do automatycznych sugestii własne wartości. W ten...
- HTML5 / Otwierany panel <details, summary>
...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 nawet użycie CSS, tak aby otwarty panel prezentował się wizualnie inaczej niż zamknięty - np. można dodać do niego czerwoną ramkę: details[open] { border: 1px solid red; } Przykład...
Reguły warunkowe CSS / Zapytania właściwości @supports...Język CSS ma wbudowany prosty system obsługi starszych wersji przeglądarek, które nie interpretują pełnej specyfikacji. Właściwości (cechy), których przeglądarka nie rozumie, są ignorowane. Oczywiście w takiej sytuacji strona nie będzie wyglądać dokładnie tak, jak założył jej twórca, ale nadal powinna być czytelna. Co ważne, nie spowoduje to odrzucenia całego arkusza stylów, więc dokument HTML zostanie poddany częściowemu formatowaniu - na tyle, ile będzie możliwe. Zdarzają się jednak...
- Nagłówek i treść HTML / Skalowanie strony <meta "viewport">
...Dzięki temu dokument HTML zostanie wyświetlony w taki sposób, aby nie wymagał od użytkownika dalszego powiększania. W przeciwnym razie przeglądarka mobilna starałaby się wyświetlić stronę w rozdzielczości typowej dla przeglądarek używanych na standardowych komputerach, co zwykle oznaczałoby zdecydowanie zbyt mały rozmiar tekstu, aby nadawał się do wygodnego czytania.
- Czcionki CSS / Odległość między znakami czcionki {font-kerning}
...można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "tryb" należy wpisać: auto - przeglądarka sama zdecyduje, jaki tryb zastosować (domyślnie) - np. aby poprawić czytelność, może wyłączyć kerning dla małego tekstu normal - wymuszenie kerningu none - zablokowanie kerningu Aby tekst wyglądał estetycznie, odległości między wszystkimi sąsiadującymi znakami powinny być podobne. Kształt niektórych par liter powoduje jednak, że...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
...Z tego powodu zaleca się stosować zapytania właściwości. Dzięki użyciu zapytań właściwości poniższy arkusz stylów zostanie zastosowany tylko w przeglądarkach obsługujących wariant pozycji czcionki. W pozostałych przypadkach po wstawieniu w tekście indeksu dolnego lub górnego wysokość linii co prawda się powiększy, ale przynajmniej wygląd indeksów nie będzie popsuty: @supports (font-variant-position: sub) { sub { vertical-align: baseline; font-size: 100%; line-height: inherit...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...już widoczna w oknie przeglądarki jeśli nie uda się załadować grafiki z tapetą - np. ze względu na problemy z połączeniem internetowym bądź jeśli przeglądarka użytkownika nie obsługuje takiego formatu graficznego albo kiedy obrazek byłby uszkodzony bądź został wcześniej usunięty kiedy użytkownik zupełnie wyłączy wyświetlanie grafiki w swojej przeglądarce - ponieważ np. ma bardzo powolne lub drogie połączenie internetowe ścieżka dostępu do obrazka Lokalizacja gdzie znajduje się plik...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...wyświetlania czcionek). Właśnie na taką okoliczność została stworzona deklaracja "text-overflow: ellipsis". Jeśli ją zastosujemy np. do akapitu, przeglądarka sama wstawi wielokropek, kiedy będzie to konieczne. Warto przy tym wiedzieć o bardzo wygodnym zachowaniu przeglądarek. Jeśli zaznaczymy myszką tak skrócony tekst, a następnie skopiujemy go do schowka systemowego, to znajdzie się tam pełna postać tekstu - ze wszystkimi wyrazami, ale bez wstawionych automatycznie wielokropków. Trzeba...
- Tekst CSS / Tryb pisania {writing-mode}
...opcja 2 lista rozwijalna opcja 1 opcja 2 ...a to jest kolejna linijka. Jeśli powyżej widzisz pola formularza ułożone poziomo, to znaczy, że Twoja przeglądarka nie obsługuje pionowego ich ułożenia.
- Tekst CSS / Orientacja tekstu {text-orientation}
...opcja 2 lista rozwijalna opcja 1 opcja 2 ...a to jest kolejna linijka. Jeśli powyżej widzisz pola formularza ułożone poziomo, to znaczy, że Twoja przeglądarka nie obsługuje pionowego ich ułożenia.