przeglądarki - Kurs HTML i CSS
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...
- CSS dla zielonych / Marginesy strony CSS {margin, margin-top, margin-bottom, margin-left, margin-right}
Przeglądarki zwykle ustalają pewną szerokość marginesów strony. Nie zawsze jednak domyślne ustawienia będą dobrze współgrać np. z określonym przez nas rozmiarem czcionki. Na szczęście bardzo łatwo można to zmienić: body { margin: szerokość; } albo jeśli chcemy ustawić marginesy niesymetryczne (z każdej strony inne): body { margin-top: górny; margin-bottom: dolny; margin-left: lewy; margin-right: prawy; } Aby określić szerokość marginesu w pikselach, należy wpisać liczbę, a po niej...
- Komendy CSS3 / Czcionki CSS
...zobacz cechy indywidualne Media visual font-family Rodzaj czcionki Wartość [ <family-name> | <generic-family> ] Inicjalizacja zależy od przeglądarki Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media visual font-feature-settings Niskopoziomowa kontrola ustawień własności czcionek Wartość normal | <feature-tag-value> Inicjalizacja normal Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media visual font-kerning Odległość między...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
...Dzięki niej element może w każdej chwili wrócić do swojego pierwotnego wyglądu - tzn. takiego, jak został określony we wbudowanym arkuszu stylów przeglądarki. Działanie wartości revert może się wydawać nieco podobne do initial. Istnieje jednak zasadnicza różnica: initial zawsze ustawia domyślną wartość wybranej cechy CSS (zobacz sekcje "inicjalizacja" w rozdziałach: Komendy CSS 2 i Komendy CSS3) bez względu na element, do którego zostanie przypisana. Oznacza to, że np. przypisanie stylu...
- Komendy CSS3 / Mowa CSS
...Media speech voice-family Rodzina głosów Wartość [[<name> | <generic-voice>],]* [<name> | <generic-voice>] | preserve Inicjalizacja zależy od przeglądarki Zastosowanie wszystkie elementy Dziedziczenie tak Procenty nie Media speech voice-pitch Wysokość głosu Wartość <frequency> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]] Inicjalizacja medium Zastosowanie wszystkie elementy Dziedziczenie tak Procenty odnosi się do...
Nowe okno / Kilka okien...okien na pewno jest Ci absolutnie niezbędne i czy nie przyniesie czasem więcej strat niż korzyści. Zresztą przez nadużywanie podobnych skryptów, przeglądarki zaczęły na stałe blokować otwieranie "wyskakujących okienek", które zwykle były używane w celach reklamowych.
Operacje na datach - Date.prototype / Konwersja do tekstu - toString...typu daty i czasu Zwraca datę i czas w postaci tekstowej. Uwzględnia aktualną strefę czasową. Format wyjściowy może się różnić w zależności od przeglądarki. Dla daty x = new Date(0), poniższa równość jest prawdziwa: Date.parse(x.toString()) == x.valueOf() Przykład Date.prototype.toString new Date(1410, 6, 15, 13, 30, 59).toString(); // np.: "Sun Jul 15 1410 13:30:59 GMT+0200" Date.prototype.toString.call(null); // TypeError Date.prototype.toString.call(undefined)...