css3.gr

Τα print styles είναι ένα από τα σημαντικότερα, κατά την ταπεινή μου άποψη, κομμάτια ενός ενημερωτικού site. Αρκετοί χρήστες εξακολουθούν μέχρι σήμερα να τυπώνουν ειδήσεις με σκοπό να τις διαβάσουν αργότερα, όσο ...επίπονο στο περιβάλλον κι αν αυτό ακούγεται.

Τα print styles όμως είναι και ένας καλός τρόπος να “ξεχωρίσεις” το content από όλα τα παρελκόμενα: μενού πλοήγησης, sidebars, διαφημίσεις και χίλια άλλα που καταφέρνουν να βρουν μια θέση στη σελίδα μας. Ύπάρχουν αρκετοί χρήστες που  χρησιμοποιούν το print preview για να διαβάσουν με την ησυχία τους κάποιο άρθρο, ελεύθεροι από κάθε ενόχληση (προφανώς οι συγκεκριμένοι ίσως να μη γνωρίζουν ακόμη για το bookmarklet Readability, μια εξαιρετικά χρήσιμη javascript λειτουργία που με ένα κλικ “ξεκαθαρίζει” το περιεχόμενο της σελίδας).

Σε πρόσφατη αναζήτησή μου για τα πιο ενδεικτικά print styles που χρησιμοποιούν μεγάλα ενημερωτικά sites εξεπλάγην. Αν και τα περισσότερα από αυτά προσφέρουν κάποιου είδους λειτουργία printing έτοιμη, τα περισσότερα δεν διαθέτουν καθόλου default print styles, με αποτέλεσμα η εκτύπωση να μην διαφέρει και πολύ από την online μορφή του άρθρου, σπαταλώντας χαρτί, μελάνι και χώρο. Επιπλέον, τις περισσότερες φορές τα font-sizes για το web δεν είναι κατάλληλα για το χαρτί, με καταστροφικά αποτελέσματα κυρίως για τα νεύρα των τριγύρω (”Ζαχαρένιααααα, γιατί τα ‘βγαλε τόσο μικρά;”).

Ελάτε παρέα να δούμε μαζί την έντυπη μορφή τριών από τα μεγαλύτερα ενημερωτικά sites του Διαδικτύου.

Σήμερα θα μιλήσουμε για τον καταστροφέα των κόσμων, το διαφθορέα πολιτισμών, τη νέμεση όλων των web designers ανά τον κόσμο, τον Internet Explorer 6 (θα μου συγχωρήσετε το αρσενικό πρόσωπο, είναι ευκολότερο να προσωποποιηθεί έτσι).

Πρόκειται για έναν από τους πιο συχνούς πονοκεφάλους των ανθρώπων που δημιουργούν websites, τόσο λόγω των πολυάριθμων προβλημάτων που παρουσιάζει στην απόδοση του CSS όσο και στις διαφορές που παρουσιάζει στο Javascript rendering, σε σχέση με τους λεγόμενους “σύγχρονους” browsers (Firefox 3, Safari, Opera, Internet Explorer 7).

Υπάρχουν τελικά τρόποι να μειώσουμε τον χρόνο που απαιτείται για την επίπονη μετάβαση κάθε project στον Internet Explorer 6;

Ακολουθούν μερικές συμβουλές, βασισμένες στην προσωπική μου εμπειρία.

Καλώς ήρθατε στο 2ο μέρος του άρθρου “CSS selectors : Ότι πρέπει να ξέρετε!” Σε αυτό το δεύτερο μέρος θα παρουσιαστούν αναλυτικά οι διάφοροι CSS 2 selectors. Γι’ αυτούς που δεν έχουν διαβάσει το πρώτο μέρος και δεν θεωρούν τους εαυτούς τους CSS gurus, καλό θα ήταν να ρίξουν μια ματιά στο προηγούμενο μέρος του άρθρου έτσι ώστε να ξεκινήσουν σωστά και να θέσουν “γερές” βάσεις στο θέμα CSS selectors. Στην συνέχεια μπορούν να συνεχίσουν την ανάγνωση του συγκεκριμένου άρθρου, στο οποίο θα βρουν συγκεντρωμένους όλους τους CSS 2 selectors.

Σε αυτό το σημείο θα ήθελα να αναφέρω πως οι CSS 1 και 2 selectors αποτελούν τον πυρήνα των CSS selectors, μιας και οι περισσότεροι σύγχρονοι browsers (Firefox, Opera, Chrome, Safari και Internet Explorer 8) τους υποστηρίζουν πλήρως! Τώρα υπάρχουν κάποια μικρά προβληματάκια με τον Internet Explorer 7 (και ακόμα πιο μεγάλα με τον 6) ωστόσο το γεγονός πως ο Internet Explorer 8 κατάφερε επιτέλους να υποστηρίξει όλους τους CSS 1 και 2 selectors, θεωρήθηκε μεγάλη επιτυχία. Τέλος, θα ήθελα να υπενθυμίσω πως στο πρώτο μέρος του άρθρου εξηγώ πολύ αναλυτικά τους διάφορους χαρακτήρες και σύμβολα που χρησιμοποιώ για τα pattern του κάθε selector. Εάν λοιπόν δεν τα θυμάστε ή δυσκολεύεστε να καταλάβετε κάτι, ρίξτε τους μια γρήγορη ματιά. Ας ξεκινήσουμε λοιπόν...

Μια από τις πιο ελπιδοφόρες προσθήκες του CSS3 είναι το λεγόμενο RGBa, ένας νέος τρόπος καθορισμού του χρώματος που αν εδραιωθεί, θα βελτιώσει κατά πολύ τη δουλειά των designers.

Πρόκειται για μια λύση που μπορεί να αντικαταστήσει τεχνικές διαφάνειας όπως οι εικόνες .png και να δώσει το ίδιο, αν όχι καλύτερο (και πιο απλό αποτέλεσμα).

Στην αιώνια μάχη αν πρέπει το layout ενός website να είναι fixed (δηλαδή να καταλαμβάνει συγκεκριμένο πλάτος στην οθόνη) ή liquid (να καταλαμβάνει όλη την οθόνη) υπάρχει ένας ακόμα παίκτης που συχνά ξεχνάμε, το elastic layout.

Τι είναι το elastic layout θα το δούμε σε πολύ λίγο. Ας κάνουμε πρώτα εύκολο το διαχωρισμό μεταξύ fixed και liquid.

Fixed vs. liquid layout

Το fixed layout είναι το πιο συνηθισμένο μοντέλο. Καταλαμβάνει συγκεκριμένο πλάτος στην οθόνη, συνήθως 960px, ώστε να φαίνεται σωστά σε όλες τις συνηθισμένες αναλύσεις οθόνης. Παράδειγμα fixed layout είναι αυτό το site. Το καταλαβαίνει κάποιος με δυο εύκολους τρόπους:

• αν μικρύνει αρκετά το μέγεθος του browser του θα δει ότι από ένα σημείο και μετά ότι τα περιεχόμενα δε χωράνε σε αυτό, ενώ ταυτόχρονα το πλάτος παραμένει σταθερό
• αν πατήσει στο πληκτρολόγιο του Ctrl+ ή Ctrl- θα δει ότι μεγαλώνουν ή μικραίνουν τα γράμματα, χωρίς όμως να αυξάνεται ή να μειώνεται το πλάτος της γραμμής

Το liquid layout τώρα, αναλαμβάνει να καλύψει όλο το διαθέσιμο χώρο του browser όποιο μέγεθος κι αν έχει αυτός. Ένα παράδειγμα liquid layout είναι το molly.com της σπουδαίας advocate των Web Standards, Molly Holzschlag.

Το liquid layout θεωρείται αρκετά μη βολικό και δε θα ασχοληθούμε και ιδαίτερα μαζί του.