przeglądarki - Kurs HTML i CSS
Czcionki CSS / Odległość między znakami czcionki {font-kerning}...znakami wygląda tak samo, chociaż fizycznie odległość między nimi nie musi być taka sama. Zwykle zdanie się tutaj na domyślne działanie przeglądarki jest najlepszym rozwiązaniem. Jednak czasami dla niektórych rodzajów i wielkości czcionek znaki w tekście mogą wydawać się dziwnie nierówno od siebie oddalone albo nieczytelne. Dlatego jeśli domyślny sposób wyświetlania tekstu nas nie satysfakcjonuje, pomocne może być wymuszenie albo zablokowanie kerningu. font-kerning w odróżnieniu...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
...do znaczników <sub>...</sub> i <sup>...</sup>, ponieważ niosą one ze sobą dodatkowe znaczenie semantyczne. Mimo iż zgodnie ze specyfikacją CSS przeglądarki powinny zasymulować wygląd indeksu w tekście, nawet jeśli użyta czcionka nie udostępnia takiego wariantu, niestety nie jest to normą. 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...
- Tekst CSS / Orientacja tekstu {text-orientation}
...otrzymamy: Kolumna 1 Kolumna 2 Kolumna 3 Wiersz 1 1 2 3 Wiersz 2 4 5 6 Wiersz 3 7 8 9 [Porównaj przykład z rozdziału: Tryb pisania] Niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy: To jest pierwsza linijka... obszar tekstowy lista rozwijalna opcja 1 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.
- Tło CSS / Rozmiary tła obrazkowego {background-size}
...na wstawieniu w tle strony tylko jednego egzemplarza obrazka (bez jego powielania), ale w taki sposób aby idealnie dopasował się do rozmiarów okna przeglądarki - niezależnie od używanej rozdzielczości ekranu. Powyższe polecenie pozwala uzyskać taki efekt i to bez żadnych sztuczek ani obejść. Trzeba jednak pamiętać, że rozciąganie obrazka nie tylko zniekształca jego proporcje, ale również w przypadku powiększania wpłynie na utratę jakości grafiki. Pamiętaj również, aby nie wstawiać w tle...
- Marginesy CSS / Wymiarowanie pudełka {box-sizing}
...jako "rodzaj" należy podać: content-box Wymiarowanie zgodne z modelem pudełkowym border-box Wymiarowanie zgodne z trybem Quirks Bardzo stare przeglądarki (w zamierzchłych czasach MSIE 5) nie potrafiły wymiarować bloków zgodnie ze specyfikacją CSS. Sytuacja ta już dawno uległa poprawie, jednak w celu zachowania kompatybilności wstecz, niektórzy producenci przeglądarek decydowali się na wprowadzenie w swoich nowych produktach trybu niezupełnej zgodności ze standardami - Quirks. Twórcy...
- Rozmiary CSS / Blok obejmujący CSS
...tabeli lub inline-block będący przodkiem dla danego elementu. Jeśli element jest pozycjonowany w sposób ustalony, blok obejmujący wyznacza okno przeglądarki. Jeśli element jest pozycjonowany absolutnie, blok obejmujący jest wyznaczony przez najbliższego przodka z pozycjonowaniem absolutnym, relatywnym lub ustalonym w następujący sposób: Jeśli przodek jest wyświetlany jako inline-block i kierunek tekstu (direction) jest określony jako ltr (od lewej do prawej) góra i lewa strona bloku...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...pionową pozycję markera, co przy wykorzystaniu tradycyjnych metod nie jest możliwe, a właśnie wtedy sprawia to największe problemy, gdyż różne przeglądarki ustawiają obrazkowe wyróżniki wykazów w odmienny sposób - kilka pikseli wyżej lub niżej niż w innych. Przykład Punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt pierwszy... punkt...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...się inne elementy blokowe jeśli ustalimy wysokość elementu, a tekstu nawet po zawinięciu będzie za dużo, aby się tam zmieścił * Niektóre starsze przeglądarki mogą obsługiwać "text-overflow: ellipsis" tylko w połączeniu z "white-space: nowrap". Przykład {text-overflow} p { width: 3em; } Za długie wyrazy w tym akapicie powinny wychodzić poza jego obręb. p { width: 3em; overflow: hidden; } Za długie wyrazy w tym akapicie powinny zostać przycięte. p { width: 3em; overflow: hidden...
- Pozycjonowanie CSS / Przyleganie {clear}
...pod drugim - tak jak prawdopodobnie oczekiwaliśmy - lecz obok siebie. Co więcej, ułożenie będzie zależało od rozdzielczości ekranu i rozmiarów okna przeglądarki (w mniejszej rozdzielczości wszystko może być w porządku). Aby pozbyć się tych niedogodności wystarczy dla obrazków określić dodatkowo deklarację: clear: right. Przykład {clear} <img style="float: left"> <p style="clear: left">Lewy bok tego akapitu nie przylega do obrazka</p> <img style="float: left"> <p style="clear: right">Prawy...
- Układ wielokolumnowy CSS / Odstęp kolumn {column-gap}
...efektowi może skutecznie zapobiegać przerwa między kolumnami. Warto mieć na uwadze, że wartość domyślna tego odstępu (normal) zależy od konkretnej przeglądarki i wcale nie musi być równa zero. W obecnej wersji specyfikacja CSS nie pozwala ustalać różnego odstępu kolumn tego samego elementu. Przykład {column-gap} columns: 3; column-gap: 1em; To jest przykładowa treść, ułożona w wielu sąsiadujących kolumnach. Tekst jest automatycznie przenoszony z końca jednej kolumny na początek...