Styling HTML5 elements

Όσοι έχετε δοκιμάσει να παίξετε με την HTML5 θα έχετε πέσει σε διάφορες παραξενιές της. Χτες έπεσα σε μία από αυτές που μου έφαγε πολύ χρόνο, ενώ μου προκαλεσε και εντύπωση το γεγονός πως πολλά HTML5 άρθρα και posts δεν αναφέροντε στο συγκεκριμένο πρόβλημα όσο ξεκάθαρα θα έπρεπε (μέχρι και το Google με απογοήτευσε στις αναζητήσεις μου).

Το πρόβλημα που είχα, ήταν πως ενώ η HTML5 markup μου ήταν σωστή (και valid), elements όπως header, section, footer και aside, δεν καταλάβαιναν τους styling κανόνες που τους έβαζα! Οι μοντέρνοι και HTML5-ready browsers έδειχναν να μην κάνουν σωστό rendering τα καινούργια elements (ο Firefox και ο Chrome τουλάχιστον, αν και έχω την αίσθηση πως και οι υπόλοιποι θα έχουν ανάλογα προβλήματα). Η λύση τελικά είναι πανεύκολη, απλά δίνουμε στα καινούργια elements display:block.

header, section, footer, aside, nav, article, figure { display: block; }

Από ότι κατάλαβα για κάποιο περίεργο λόγο, οι browsers κάνουν τα παραπάνω στοιχεία rendering ως inline elements, οπότε με τον παραπάνω απλό κανόνα καθαρίσαμε. Μπορεί έχασα ένα ολόκληρο απόγευμα, ωστόσο πιστεύω πως άξιζε τον χρόνο. Άλωστε μόνο έτσι μαθαίνεις…

  • Για την ακρίβεια, οι browsers κάνουν render ως inline element κάθε element που δεν καταλαβαίνουν, όχι μόνο τα νέα της HTML5. Αυτά απλά τα αντιμετωπίζουν όπως και θα αντιμετώπιζαν κάποιο <foobar> tag ας πούμε.

    (Απλά, σε αντίθεση με τον IE, οι άλλοι browsers μπορούν να αναγνωρίσουν και να φτιάξουν σωστό DOM tree ακόμη και με στοιχεία που δεν γνωρίζουν.)

    Πάντως, καλό θα ήταν να προσθέσεις και τα υπόλοιπα νέα elements στον selector σου: http://html5doctor.com/html-5-boilerplates/#html_5_complete_compatible

  • John Tsevdos

    Ευχαρητώ για το comment Λία! να σου πω την αλήθεια, πλέον περνάω το HTML5 reset (http://html5doctor.com/html-5-reset-stylesheet/) σε συνδιασμό με αυτό το HTML5 scriptακι (http://remysharp.com/2009/01/07/html5-enabling-script/) για το IE…

  • Α, δεν παρατήρησα ότι ήταν τόσο παλιό το άρθρο.

    Χμμμ προσωπικά δεν είμαι και πολύ υπέρ των reset stylesheets γενικότερα (λόγω όγκου — και δικού τους και του κώδικα που σε αναγκάζουν να γράψεις), αλλά αν σε βολεύουν, αξίζει τον κόπο. 🙂

  • John Tsevdos

    Την παλεύεις χωρίς resets styles; Τι λες τώρα;!;!