Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML5 e CSS3 Importante

    Caricato da

    Bruno Vitiello
    132 visualizzazioni4 pagine

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    DOC, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    132 visualizzazioni4 pagine

    HTML5 e CSS3 Importante

    Caricato da

    Bruno Vitiello

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 4

    Compatibilit cross-browser dei nuovi tag semantici di HTML5

    HTML5 introduce una serie di nuovi tag per attribuire un significato semantico alle diverse parti che costituiscono la pagina: header, nav, footer, article, section, figure, ecc. Se i browser moderni supportano nativamente questi elementi, i browser pi datati !come le versioni di "nternet #$plorer precedenti la %& semplicemente ignorano la presen'a di questi tag, rendendo ad esempio impossibile applicare uno stile specifico mediante (SS. )er risolvere questo problema di compatibilit* possiamo utili''are un mar+up ibrido, ovvero che preveda un ,wrap, tramite elementi noti !tipicamente un div& dei nuovi tag:
    <!DOCTYPE html> <html> <head> <style> header, div.header { backgro !d" red# $ <%style> <%head> <body> <header> <div class&'header'> <h(>Titolo<%h(> <%div> <%header> <%body> <%html>

    -ppure:
    <!DOCTYPE html> <html> <head> <style> header, div.header { backgro !d" red# $ <%style> <%head> <body> <div class&'header'> <header> <h(>Titolo<%h(> <%header> <%div>

    <%body> <%html>

    Sen'a intervenire sul mar+up possiamo consentire a "# di ,riconoscere, i nuovi elementi usando .avascript. Tramite una tecnica nota ,HTML5 Shiv, !o ,HTML5 Shim,& / infatti sufficiente creare un tag tramite la fun'ione document.createElement affinch0 possa essere riconosciuto da "#12:
    <!DOCTYPE html> <html> <head> <style> header { backgro !d" red# $ <%style> <scri)t> doc me!t.createEleme!t*'header'+# <%scri)t> <%head> <body> <header> <h(>Titolo<%h(> <%header> <%body> <%html>

    Evidenziare le righe alternate di una tabella con CSS


    I selettori di CSS3 consentono di effettuare query complesse sugli elementi del DOM basandosi sulla loro gerarchia, cos da poter applicare uno stile grafico senza do er necessariamente inter enire sul mar!up della pagina "ad esempio aggiungendo un attributo ID o class#$ %a pseudo&classe !nth-child"expr# consente di determinare gli elementi in base alla loro posizione rispetto ai fratelli "siblings# nell'albero del documento$ Specificando come espressione le costanti even eodd ( possibile ottenere rispetti amente gli elementi pari e quelli dispari$ )ell'esempio di codice che segue alle righe *, 3 e + della tabella "odd# err, applicato uno sfondo bianco e alle righe -, . e / "e en# giallo$

    <style> table tr"!th,child*odd+ { backgro !d" a- re# $ table tr"!th,child*eve!+ { backgro !d" lightgray# $ <%style>

    <table> <tr><td>.iga ! mero (<%td><%tr> <tr><td>.iga ! mero /<%td><%tr> <tr><td>.iga ! mero 0<%td><%tr> <tr><td>.iga ! mero 1<%td><%tr> <tr><td>.iga ! mero 2<%td><%tr> <tr><td>.iga ! mero 3<%td><%tr> <%table>

    0 possibile utilizzare espressioni pi1 complesse con an+b per ottenere tutti i nodi che abbiano an+b-1fratelli che li precedono nella gerarchia "per n maggiore o uguale a zero#$ Di seguito alcuni esempi per chiarire meglio un concetto che a prima ista pu2 sembrare complesso3 al selettore :nth-child(1) corrisponde il primo nodo "equi ale di fatto alla pseudo&classe :firstchild4 al selettore :nth-child(3n) corrispondono il terzo, il sesto, il nono, ecc$ nodo4 even equi ale pertanto all'espressione 2n al selettore :nth-child(10n+9) corrispondono il nono, il dicianno esimo, il entino esimo, ecc$ nodo4 pu2 anche essere espresso come :nth-child(10n-1)4 odd equi ale pertanto all'espressione 2n-1 I selettori di CSS3 sono utilizzati, oltre che nei fogli di stile, anche per l'accesso agli elementi del DOM ia 5a aScript attra erso le nuo e Selectors $%& di 67M%+ o con frame8or! come '(uer)$

    &l nuovo tag nav in HTML5


    9no dei nuo i elementi introdotti da 67M%+ ( nav che consente di raggruppare un insieme di lin! che definiscono un percorso di na igazione$ Si tratta di un tag semantico, o ero in grado di fornire un significato specifico al contenuto, in particolare per quanto riguarda l'indicizzazione da parte dei motori di ricerca e l'utilizzo di screenreader$
    <!av> < l> <li><a hre4&'%'>5ome Page<%a><%li>

    <li><a hre4&'%)rod cts%'>Prodotti<%a><%li> <li><a hre4&'%services%'>6ervi-i<%a><%li> <li><a hre4&'%com)a!y%'>6ociet7<%a><%li> <% l> <%!av>

    %'elemento nav pu2 essere usato, oltre che per la na igazione principale del sito, anche per la creazione dell'indice dei contenuti di una pagina, per i collegamenti di paginazione "a anti, indietro, ecc$# e per il mar!up delle :briciole di pane: "breadcrumbs na igation#$ %a specifica ( disponibile all'indirizzo http3;;de $83$org;html+;spec;O er ie8$html<the&na &element

    &l corretto mar*up per la navigazione in HTML5


    )ello script precedente abbiamo introdotto il nuo o tag nav, usato per indicare in modo formale un insieme di lin! che costituiscono una na igazione, come ad esempio il menu principale del sito "tipicamente posto sotto la testata o nella colonna laterale#, la na igazione :a briciole di pane:, l'indice dei contenuti "table of content# di una pagina e lo scorrimento a anti e indietro di un contenuto disposto su pi1 pagine$ )on tutti i lin! de ono dunque essere necessariamente contenuti in un elemento nav ma solo quelli che costituiscono una na igazione :principale:3 i lin! :secondari: come quelli che rimandano alle condizioni di endita, alla normati a sulla pri acy, alle informazioni sul copyright e cos ia sono in ece tipicamente presentati all'interno di un tag footer$ 9n elemento che potrebbe creare confusione con nav ( menu$ In realt, questi due tag hanno significati semantici profondamente di ersi3 se nav indica un percorso di na igazione, menu indica un insieme di comandi, di azioni tipiche di una =eb >pplication$

    Potrebbero piacerti anche