Στο δεύτερο μέρος της σειράς άρθρων για την responsive σχεδίαση, μιλήσαμε για ένα από τα βασικά συστατικά της, την HTML5. Σε αυτό το άρθρο, θα αναλύσουμε ένα ακόμη βασικό συστατικό της responsive σχεδίασης, την CSS3, καθώς και τα νέα χαρακτηριστικά της.
Η CSS (Cascading Style Sheets) είναι μια γλώσσα υπολογιστή που χρησιμοποιείται για τον έλεγχο της εμφάνισης ενός εγγράφου που έχει γραφτεί με μια γλώσσα σήμανσης (πχ. HTML). Η χρήση της CSS επιτρέπει στο έγγραφο να προσαρμόζεται ανάλογα με τη συσκευή που χρησιμοποιείται για την προβολή του όπως για παράδειγμα διαφορετικού μεγέθους οθόνες. Μειώνει τη χρήση bandwidth που απαιτείται για την αποστολή της ιστοσελίδας στον χρήστη και τέλος με την χρήση της δεν υπάρχει η ανάγκη για browser – specific markup και έτσι βελτιώνεται η προσβασιμότητα και αυξάνεται ο πληθυσμός που έχει πρόσβαση στον ιστότοπο.
Στην CSS δεν υπάρχουν εκδόσεις με την συμβατική έννοια· αντί αυτών υπάρχουν επίπεδα, όπου κάθε επίπεδο επεκτείνει, βελτιώνει και προσθέτει στις λειτουργίες του προηγούμενου επιπέδου. Το σύνολο των χαρακτηριστικών κάθε επόμενου επιπέδου είναι ένα υπερσύνολο των λειτουργιών του κατώτερου επιπέδου και με αυτή την λογική ένας περιηγητής συμβατός με ένα ανώτερο επίπεδο θα είναι συμβατός και με κάθε κατώτερο επίπεδο. Το επίπεδο 1 πλέον θεωρείται απαρχαιωμένο και περιττό. Στο επίπεδο 1 ορίζονται τα περισσότερα από τα βασικά στοιχεία όπως ιδιότητες, τιμές και κανόνες.
Στη συνέχεια, εμφανίστηκε το επίπεδο 2 του οποίου η χρήση αποκάλυψε πολλά προβλήματα και έτσι χρειάστηκε να αναθεωρηθεί. Έτσι, προέκυψε η CSS2.1, η οποία αντικατέστησε την CSS 2 και σε οποιαδήποτε περίπτωση υπάρχει ασυμφωνία μεταξύ των δυο προδιαγραφών ισχύει η 2.1. Αν και η 2.1 συνιστά αναθεώρηση της CSS2, κάποια προβληματικά χαρακτηριστικά καταργήθηκαν στην 2.1 και επανεξετάζονται στην CSS3. H CSS3 επεκτείνει όλα τα επιμέρους τμήματα της CSS2 με την χρήση της CSS2.1 ως βάσης· στόχος είναι η ενίσχυση της λειτουργικότητας και η βελτίωση των ορισμών ενώ παραμένει πλήρως συμβατή με την CSS 2.
CSS3
Η CSS3 φέρνει πάρα πολλές αλλαγές στο κεφάλαιο “σχεδίαση ιστοσελίδων”. Ίσως η σημαντικότερη από αυτές είναι o διαχωρισμός σε ορίσματα (modules). Ενώ στα προηγούμενα επίπεδα της CSS όλη η εμφάνιση του ιστότοπου καθοριζόταν από ένα ενιαίο κώδικα που καθόριζε τα επιμέρους χαρακτηριστικά, στη CSS3 έχουμε διαχωρισμό του κώδικα σε ορίσματα. Καθένα από αυτά τα ορίσματα έχουν τα δικά τους χαρακτηριστικά και δυνατότητες.
Το όρισμα που έχει προκαλέσει τη μεγαλύτερη επίδραση στους προγραμματιστές είναι τα ερωτήματα μέσων (media queries), το οποίο θα αναλυθεί στο τέταρτο μέρος αυτής της σειράς άρθρων, καθώς είναι αυτό που αποτελεί τον βασικό πυλώνα της responsive σχεδίασης. Συνοπτικά, τα ερωτήματα μέσων επιτρέπουν την εφαρμογή προτάσεων υπό όρους (conditional statements) ώστε υπό διαφορετικές συνθήκες να έχουμε διαφορετικά στυλ που θα προσαρμόζουν τον ιστότοπο στην κάθε οθόνη – ανάλυση.
Τι προσφέρει το CSS3 στη σχεδίαση ιστοσελίδων
Κάποια από τα νέα χαρακτηριστικά της CSS3 που αξίζει να αναφερθούν, καθώς αποτελούν λύση σε καθημερινά προβλήματα των προγραμματιστών, είναι τα εξής:
Rounded Corners: Στα προηγούμενα επίπεδα της CSS, η χρήση στρογγυλεμένων γωνιών ήταν μια χρονοβόρα διαδικασία καθώς, κάθε φορά, οι προγραμματιστές ήταν υποχρεωμένοι να «κόβουν» τέσσερις κυκλικές εικόνες και να τις τοποθετούν σε κάθε γωνία του div ώστε να παραχθεί το εφέ.
Πλέον, οι ιδιότητες «border-radius», «-moz-border-radius» και «-webkit-border-radius» λύνουν τα χέρια των προγραμματιστών, αφού το μόνο που χρειάζεται είναι να οριστεί η ακτίνα του κύκλου.
Πολλαπλές εικόνες για φόντο: Πρακτικά αυτό σημαίνει, πολλά backgrounds σε ένα div. Η CSS3 επιτρέπει τον ορισμό πολλών εικόνων ως φόντο για ένα div, τη θέση του καθενός μέσα στο div και το επίπεδο εμφάνισής τους.
Transitions: Τα CSS3 Transitions είναι ένα σετ κανόνων CSS που επιτρέπουν την αλλαγή τιμών στις ιδιότητες ενός στοιχείου, ομαλά και σταδιακά σε συγκεκριμένο χρόνο. Με άλλα λόγια, επιτρέπουν την αλλαγή τιμών στα στοιχεία, με τέτοιο τρόπο, ώστε το αποτέλεσμα να είναι ένα εφέ σαν animation.
Χρώματα: Η CSS3 παρέχει μια τεράστια ποικιλία των διαθέσιμων χρωμάτων, όπως τα νέα χρωματικά μοντέλα HSL, HSLA και το σημαντικότερο απ’ όλα RGBA.
Η νέα τιμή «A» στο μοντέλο RGBA αφορά τη διαφάνεια. Μέχρι τώρα για να επιτευχθεί η διαφάνεια, ο προγραμματιστής χρησιμοποιούσε εικόνες με διαφάνεια (.gif, .png). Πλέον, έχει τη δυνατότητα να πειραματιστεί με τη διαφάνεια και να δημιουργήσει ελκυστικά divs εύκολα και γρήγορα.
Εφέ κειμένου (text effects) και στις γραμματοσειρές: Τα εφε λειτουργούν πλέον και στις γραμματοσειρές. Η ιδιότητα «text-shadow» μπορεί να δημιουργήσει οποιουδήποτε πάχους, χρώματος, και σκληρότητας σκιά γύρω από κείμενο. Έως τώρα, ο προγραμματιστής ήταν αναγκασμένος να «βαραίνει» την ιστοσελίδα με εικόνες όταν τα γραφικά ήταν πολύ εντυπωσιακά. Πλέον, με τη χρήση της CSS3, τα παραπάνω εφέ αποδίδονται το ίδιο καλά, όπως θα αποδίδονταν αν γινόταν χρήση εικόνων για την αναπαράσταση τους.
@font-face: Με το ερχομό της CSS3 δεν υπάρχει ανάγκη χρήσης των λεγόμενων «web safe fonts» (πχ times new roman), τα οποία μπορεί να είναι ασφαλή, αλλά τις περισσότερες φορές είναι μέτρια σε εμφάνιση. Πλέον μπορούν να χρησιμοποιηθεί μέσα στο αρχείο CSS η ιδιότητα «font-face» και να καλείται η συγκεκριμένη γραμματοσειρά μέσω ενός αρχείου, του αρχείου της γραμματοσειράς το οποίο έχει αποθηκευτεί κάπου στο server.
Attribute Matching: Η ιδιότητα Matching χρησιμοποιείται για να οριστεί στυλ σε tags, τα οποία έχουν κοινούς αρχικούς χαρακτήρες της συμβολοσειράς.
Για παράδειγμα η κλάση «newclass» και η κλάση «nextclass» παίρνουν το ίδιο στυλ ορίζοντας απλά ότι το tag τους ξεκινά από «ne».
Αφήστε το σχόλιο σας