przeglądarki - Kurs HTML i CSS
HTML5 / Autouzupełnianie <datalist>...wpisać w zasadzie jedną z podanych wartości, a nie dowolny tekst. Taki efekt powinniśmy uzyskać, wstawiając dodatkowy znacznik SELECT - nowsze przeglądarki po prostu go pominą, stosując mechanizm autouzupełniania, a starsze wyświetlą standardową listę rozwijalną: <input name="nazwa" list="identyfikator"> <datalist id="identyfikator"> <select name="nazwa"> <option value="wartość1" label="skrót1"> <option value="wartość2" label="skrót2"> </select> </datalist> Przykład <datalist>...
- HTML5 / Pasek postępu <progress>
...stopienia postępu - gdy bardziej czasochłonne zadanie jest w trakcie wykonywania, lecz nie wiadomo, kiedy zostanie ukończone. W takim przypadku przeglądarki mogą wyświetlić na ekranie specjalny animowany pasek postępu, którego pozycja będzie np. przechodzić w kółko z jego lewej na prawą stronę. Przykład <progress> Zobacz przykład: PROGRESS
- HTML5 / Responsywny obrazek <picture, source>
...stopień kompresji danych. Dzięki temu pliki w nich zapisane mogą być nawet kilkukrotnie lżejsze niż np. w tradycyjnym formacie JPG. Niestety starsze przeglądarki nie obsługują takich formatów, a wtedy na stronie zamiast pożądanej ilustracji użytkownik zobaczy zapewne ikonę zastępczą informującą o uszkodzonym pliku graficznym. Możemy jednak przygotować wiele formatów zdjęcia i dać przeglądarce możliwość wyboru. Każdy element SOURCE umieszczony wewnątrz znacznika PICTURE może mieć nadany inny...
- HTML5 / Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>
(interpretuje: Internet Explorer 6, Firefox 2, Opera 10, Chrome 17) Cały formularz: <form autocomplete="autouzupełnianie">...</form> Wybrane pole: <input type="typ" autocomplete="autouzupełnianie"> Lista rozwijalna: <select autocomplete="autouzupełnianie">...</select> Obszar tekstowy: <textarea autocomplete="autouzupełnianie">...</textarea> autouzupełnianie Można podać: on - autouzupełnianie aktywne (domyślnie) off - autouzupełnianie nieaktywne typ Należy użyć dowolnego pola...
- HTML5 / Dekodowanie obrazków <img decoding>
...obrazka. async - przeglądarka może wyświetlać pozostałe elementy strony w trakcie przetwarzania obrazka. auto - wartość domyślna (zależy od przeglądarki) Podpowiada przeglądarce, w jaki sposób najlepiej wyświetlić dany obrazek. Nadanie atrybutu decoding="sync" może spowolnić wyświetlanie całej strony - zwłaszcza w przypadku dużych obrazków. Pytania i odpowiedzi <img decoding> Co to znaczy "dekodowanie"? Dekodowanie odnosi się do procesu przekształcania danych z jednego...
- HTML5 / Przeciągnij i upuść <... draggable>
...strony - jak np. odnośniki hipertekstowe - domyślnie mogą być przeciągane przez użytkowników. Jeśli taki link zostanie upuszczony na pasku adresu przeglądarki, nastąpi jego wczytanie. Można je również upuszczać na pola tekstowe formularzy. W niektórych przypadkach możemy jednak nie chcieć takiego zachowania. Aby zablokować przypadkowe przeciągnięcie elementu przez użytkownika wystarczy nadać mu atrybut draggable="false". Oprócz tego do sterowania mechanizmem przeciągnij-i-upuść służą...
- HTML5 / Element bierny <... inert>
...interaktywności dynamicznym elementom strony, które jeszcze nie do końca się wczytały albo chwilowo znajdują się poza zakresem widoczności okna przeglądarki, zanim użytkownik nie wykona jakiejś założonej akcji.
- HTML5 / Podpowiedź pola formularza <input placeholder, textarea placeholder>
...wewnątrz pola w postaci wyszarzonego tekstu Atrybut placeholder="..." podpowiada użytkownikowi, co powinien wpisać w danym polu formularza. Przez przeglądarki może być obsługiwany w ten sposób, że jego wartość będzie na początku wpisana w pole w postaci wyszarzonego tekstu, który zniknie po umieszczeniu w nim kursora tekstowego przez użytkownika i rozpoczęciu wpisywania właściwej wartości. Przykład <input placeholder> <input type="search" name="q" placeholder="Szukaj w serwisie...">...
- HTML5 / Sprawdzanie pisowni <... spellcheck>
...(to samo co użycie spellcheck jako atrybut logiczny - bez podania wartości). false - pisownia i gramatyka nie będą sprawdzane. Popularne przeglądarki mają wbudowaną funkcję automatycznego sprawdzania pisowni, a czasem nawet gramatyki, tekstu wpisywanego przez użytkownika np. w obszarze tekstowym. Może ona jednak przysporzyć sporo kłopotów, jeśli pole nie zostało przeznaczone do wprowadzania zwykłego tekstu, tylko np. kodu komputerowego. W takim przypadku czasem lepiej wyłączyć tę...
- HTML5 / Tłumaczenie językowe <... translate>
...się specjalne programy, służące do automatycznego tłumaczenia stron obcojęzycznych na język rodzimy użytkownika. Często są one również wbudowane w przeglądarki internetowe lub system operacyjny. Jednak nie każdy fragment tekstu powinien być tłumaczony. Na przykład kod programu, zawierający instrukcję w języku angielskim, powinien zostać nietknięty przez aplikację tłumaczącą. Aby zabronić tłumaczenia tekstu, należy do elementu, który go obejmuje, przypisać atrybut translate="no".