Reset CSS dla HTML5

11 maja 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Wiele osób poszukuje szablonów, standardowych fragmentów i stylów dla dokumentów w języku HTML 5. Niedawno opublikowaliśmy artykuł autorstwa Remiego Sharpa zawierający opis kilku podstawowych części dokumentu HTML 5, a w tym artykule prezentujemy modyfikację resetu CSS Erica Meyera przystosowaną do użytku w dokumentach HTML 5.

Kod źródłowy resetu CSS

Poniżej znajduje się pełny kod źródłowy naszego arkusza stylów:

/*
html5doctor.com Reset Stylesheet
v1.6.1
Data ostatniej modyfikacji: 2010-09-17
Autor: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* Ustaw własne kolory */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* Ustaw własne kolory */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* Ustaw własny kolor obramowania */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

Co nowego

Nowości jest sporo! Poniżej wyjaśniam, jakich zmian dokonałem i dlaczego je wprowadziłem.

Rzeczy podstawowe

Najpierw usunąłem elementy, które w specyfikacji HTML 5 zostały oznaczone jako wycofywane (ang. deprecated), a więc <acronym>, <center> oraz <big>. Bardziej szczegółowo wycofywane elementy opiszę w innym artykule. Dodałem też oczywiście nowe elementy języka HTML 5, takie jak and, aby usunąć ich domyślne dopełnienie, marginesy i obramowanie. Wpisałem również deklarację display:block dla wszystkich elementów, które powinny być interpretowane jako bloki.

Pozbyłem się reguł usuwających domyślne formatowanie pseudoklasy :focus. Zrobiłem to z dwóch powodów. Po pierwsze deklaracja outline:0 usuwa wizualną wskazówkę, która jest przydatna dla użytkowników korzystających z klawiatury. Po drugie Meyer tworząc swój arkusz stylów liczył na to, że każdy własnoręcznie zdefiniuje styl dla pseudoklasy :focus. Niestety mało kto to robi, więc bezpieczniej jest pozostawić domyślne ustawienia. Zdefiniowałem też ustawienia domyślne dla elementu <ins>, który również nie jest zbyt często zmieniany.

Domyślne style list pozostawiłem wyłącznie z subiektywnych powodów. Gdy używam resetu Meyera, to i tak zazwyczaj style list wstawiam do niego z powrotem. Dodałem jednak regułę nav ul {list-style:none;}, aby pozbyć się punktorów z nawigacji.

Użycie selektorów atrybutów

Jak widać, w powyższym arkuszu zostały użyte selektory atrybutów elementów <abbr> i <dfn>. Dzięki temu style zostaną zastosowane tylko wówczas, gdy dany element będzie miał zdefiniowany atrybut title. Jest to przede wszystkim zabieg mający poprawić dostępność strony internetowej. Na przykład często używamy elementu <abbr>, ale nie zawsze definiujemy mu atrybut title. Przyjęliśmy założenie, że wszyscy nasi czytelnicy (niezależnie od tego, jakiego urządzenia używają do przeglądania stron) wiedzą, co oznacza skrótowiec HTML. Mimo że pomijamy atrybut title, to jednak umieszczenie akronimów HTML w elemencie <abbr> sprawia, że czytniki czytają je H-T-M-L, a nie próbują je odczytać , jak zwykły tekst.

Co to jest ten mark

<mark> to nowy element języka HTML 5 służący do zaznaczania tekstu. Oto, co na jego temat piszą w specyfikacji:

Element <mark> reprezentuje fragment tekstu, który jest zaznaczony lub wyróżniony w celu pokazania, że odnosi się do czegoś w innym kontekście.

Przewiduję, że elementu tego będzie się używać do wyróżniania wyszukiwanych fraz w wynikach wyszukiwania itp. Planujemy opublikować artykuł na jego temat.

Co to są elementy aplikacyjne

Elementy aplikacyjne to określenie, jakim opisuję takie elementy, jak menu itp. Częściej można je spotkać w aplikacjach sieciowych niż w serwisach internetowych. Pozostawiłem je, ponieważ jak na razie przeglądarki obsługują niewielką część tego, co jest zapisane w specyfikacji a więc można go pobrać z serwisu Google Code. Daj nam znać, jeśli dokonasz jakichś poprawek!

Reset CSS dla HTML 5

Autor: Richard Clark

Źródło: http://html5doctor.com/html-5-reset-stylesheet/

Tłumaczenie: Łukasz Piwko

Treść tej strony dostępna jest na zasadach licencji CC BY-NC 2.0 UK

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *