przeglądarka - Kurs HTML i CSS
HTML5 / Zawijanie tekstu w formularzu <textarea wrap>...zawinięty w chwili wysyłania formularza, choć może być w taki sposób wyświetlony na ekranie (domyślnie). hard - w momencie wysłania formularza, przeglądarka automatycznie zawinie tekst wpisany w polu, tzn. doda do niego znaki nowej linii, tak aby wyglądał jak na ekranie przed wysłaniem. Treść w obszarze tekstowym formularza zwykle jest wyświetlana w postaci zawiniętej. W przeciwnym razie wpisywanie byłoby bardzo niewygodne, ponieważ cały czas trzeba by było przewijać pole na boki...
Czcionki CSS / Proporcje czcionki {font-size-adjust}...określić proporcje czcionki, za pomocą powyższego polecenia. Dzięki temu, niezależnie od rodzaju czcionki, tekst będzie tak samo czytelny, ponieważ przeglądarka automatycznie dobierze odpowiednią jej wielkość - zgodnie ze wzorem: w' = w * (p / p') gdzie: w - wysokość czcionki określona w poleceniu p - proporcje określone w poleceniu w' - obliczona wysokość p' - proporcje dostępnej czcionki Przykładowo, jeśli wpiszemy: <p style="font-family: Verdana, 'Times New Roman'; font-size: 14px...
- Kaskadowe Arkusze Stylów / Cascading Style Sheets
...lub jest obsługiwana odmiennie. Dlatego zawsze należy sprawdzać efekty w praktyce - jeśli to możliwe, to najlepiej w kilku najbardziej popularnych przeglądarkach: Chrome, Firefox. Absolutnie nie trzeba się jednak obawiać stosowania CSS, ponieważ nie powodują one błędów w przeglądarkach, które ich nie obsługują. Nigdy nie zdarzy się tak, aby strona w ogóle nie została wyświetlona, ponieważ korzysta z CSS. Jeżeli przeglądarka nie obsługuje stylów, po prostu je pominie. Najważniejszym powodem...
- 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...
- 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.
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
...ustawia margines o szerokości 20 pikseli wokół elementu. Jak działa "margin: auto"? Ustawienie "margin: auto" dla elementu w CSS powoduje, że przeglądarka automatycznie wyznacza równy margines na lewej i prawej stronie tego elementu, co skutkuje wyśrodkowaniem go w poziomie w obrębie jego rodzica. Jest to szczególnie użyteczne, gdy chcesz wyśrodkować elementy w poziomie bez konieczności ręcznego określania konkretnych marginesów. Przykład: <div style="width: 300px; margin: auto...
- 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.
- Kursory CSS / Kursor obrazkowy {cursor: url}
...SVG. Możliwe jest również podanie listy kursorów rozdzielonych przecinkami. W takim przypadku wczytany zostanie pierwszy z listy plik, który przeglądarka potrafi obsłużyć. Dlatego właśnie na końcu listy powinien zostać podany tradycyjny kształt: :link, :visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer } Każdy kursor posiada ustalony jednopikselowy tzw. gorący punkt (ang. hotspot). Ten punkt jest miejscem aktywnym kursora, tzn. właśnie za jego pomocą wskazywane...
- Tło CSS / Atrybuty mieszane tła {background}
...Ma to duże znaczenie, jeśli powtarza się on na wielu stronach. Niestety podczas drukowania strony, obrazek taki zostanie pominęty. Również jeśli przeglądarka nie interpretuje stylów, obrazek nie pojawi się na ekranie. Jeśli nam to przeszkadza, należy stosować tradycyjny sposób (znacznik IMG). Przykład {background} Po wpisaniu w arkuszu stylów: *.obrazek { background: url(obrazek.jpg) no-repeat left top; padding-left: 110px } a następnie na stronie: <p class="obrazek">Po lewej stronie tego...