przeglądarki - Kurs HTML i CSS
Komendy CSS3 / Podpowiedzi dla przeglądarki CSSŹródło: CSS Will Change Module Level 1 Spis treści will-change will-change Podpowiedź renderowania dla przeglądarki Wartość auto | <animateable-feature> Inicjalizacja auto Zastosowanie wszystkie elementy Dziedziczenie nie Procenty nie Media all
- Dobre praktyki / Przykazania webmastera
...że wspólny plik *.css załaduje się tylko raz - przy pierwszym wejściu użytkownika na stronę - a potem będzie odczytany z pamięci podręcznej przeglądarki. Dzięki temu strony będą ładować się szybciej. Poza tym ułatwi Ci to dokonywanie zmian w wyglądzie serwisu, ponieważ nie będzie już potrzeby szukania wielu dokumentów, w których był wstawiony taki sam wewnętrzny arkusz CSS. Minimalizuj liczbę osobnych plików arkuszy CSS Każdy plik wymaga osobnego zapytania HTTP, a to znacząco...
- Media CSS / Zapytania mediów
...ekranu, możemy wyświetlić mu dodatkową kolumnę treści. Co więcej, można płynnie dopasowywać wygląd strony przy przeciąganiu rozmiaru okna przeglądarki przez użytkownika. Zapytania mediów wpisuje się dokładnie w tych samych miejscach, co przy tradycyjnym wyborze medium, np.: @import url(kolor.css) screen and (color); @media screen and (color) { /* Arkusz dla urządzeń z kolorowym ekranem */ } <link rel="stylesheet" media="screen and (color)" href="kolor.css"> Zapytanie mediów...
Przeglądarka zdjęćSpis treści Wymagana wiedza Przykład przeglądarki zdjęć Skrypt przeglądarki zdjęć Inicjalizacja Wymagana wiedza Konstruowanie ścieżek dostępu do obrazków Podstawy stylów CSS (m.in. arkusze stylów) Odsyłacze do podstrony Przykład przeglądarki zdjęć /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function PrzegladarkaZdjec(id, zdjecia) { this.czas = 5; // czas przejścia w...
- Tryb Quirks / X-UA-Compatible
...jest domyślnym, jednak użytkownik przeglądający stronę może sam zdecydować - za pomocą specjalnego przycisku znajdującego się przy pasku adresu przeglądarki - że chce ją wyświetlić w trybie Compatibility View, czyli tak jak w MSIE 7. Jest to ostatnia deska ratunku, gdy dokument który usiłuje wyświetlić, nieprawidłowo renderuje się w założonym trybie najwyższej zgodności. W takim przypadku emulacja jest tak dokładna, że nie da się w ogóle rozpoznać, że tak naprawdę używany jest MSIE 8...
HTML5 / Filmy i dźwięk <video, audio, source>...kontrolki odtwarzania zwykle wyglądają nieco inaczej w każdej przeglądarce. Jednak użytkownik jest przyzwyczajony do ich wyglądu właśnie ze swojej przeglądarki, więc nie powinno to dla niego stanowić problemu, a raczej ułatwienie. Jeżeli jednak nie możemy się z tym pogodzić, HTML5 daje możliwość stworzenia swoich własnych kontrolek odtwarzania. Służy do tego API JavaScript, a więc bez choćby podstawowych umiejętności programistycznych raczej się przy tym nie obejdzie. Przykład <video...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...i obramowanie zawierają się wewnątrz rozmiarów elementu, natomiast wg CSS na zewnątrz. [Porównaj: Model pudełkowy wg CSS 2] Nie dotyczy przeglądarki Firefox ani Opera. We wcześniejszych wersjach Internet Explorera przedstawiony wyżej model określania rozmiarów wg CSS odnosi się tylko do szerokości komórek tabeli, ale nie do ich wysokości. Wcześniejsze wersje MSIE nie stosowały tych zasad również w ogóle dla tabeli o rozplanowaniu stałym ("fixed"). We wcześniejszych wersjach...
- Szablon strony na DIV-ach / Płynny szablon
Płynny szablon (ang. liquid layout) charakteryzuje się zmianą swoich poziomych proporcji przy zmianie rozmiaru okna przeglądarki lub rozdzielczości ekranu. Najczęściej w każdych warunkach zajmuje on całą dostępną szerokość w oknie. Jest on raczej rzadziej stosowany, ze względu na niemożliwe do przewidzenia ułożenie elementów treści. Poza tym tekst w zbyt długich linijkach zwykle gorzej się czyta, ponieważ trudniej przenieść wzrok z końca wiersza na początek następnego. Czasami jednak może być...
- Nagłówek i treść HTML / Skalowanie strony <meta "viewport">
...należy podać rozdzieloną przecinkami listę parametrów wraz z przypisanymi im wartościami: width Określa początkową szerokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-width, które oznacza pełną szerokość obszaru wyświetlania. height Określa początkową wysokość obszaru wyświetlania przeglądarki. Może być określona bezpośrednio w pikselach albo za pomocą specjalnego słowa kluczowego device-height, które...
- Tło CSS / Zaczepienie tła obrazkowego {background-attachment}
...background-attachment: zaczepienie } Jako "zaczepienie" należy wpisać: scroll - przewijanie tła (domyślnie) fixed - tło nieruchome względem okna przeglądarki local - tło nieruchome względem elementu (jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3) [Zobacz także: Wstawianie stylów] Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas...