Στο τρίτο μέρος της σειράς άρθρων για την responsive σχεδίαση, μιλήσαμε για τη CSS3. Σε αυτό το άρθρο, θα αναλύσουμε το βασικότερο συστατικό της responsive σχεδίασης, τα ερωτήματα μέσων (media queries).
Τα ερωτήματα μέσων (media queries) αποτελούν τον βασικό πυλώνα της responsive σχεδίασης. Τα media queries επιτρέπουν την εφαρμογή προτάσεων υπό όρους (conditional statements) ώστε υπό διαφορετικές συνθήκες να έχουμε διαφορετικά στυλ που θα προσαρμόζουν τον ιστότοπο στην κάθε οθόνη – ανάλυση. Για παράδειγμα, με λίγες μόνο γραμμές CSS, είναι δυνατό να αλλάξει ο τρόπος που προβάλλεται το περιεχόμενο ενός ιστοτόπου, ανάλογα με το πλάτος του παραθύρου, την αναλογία διαστάσεων της οθόνης, ακόμα και τον προσανατολισμό της συσκευής.
Τα media queries χρησιμοποιούνται ευρέως και υποστηρίζονται από όλους τους σύγχρονους περιηγητές (Firefox 3.6+, Safari 4+, Chrome 4+, Opera 9.5+, iOS Safari 3.2+, Opera Mobile 10+, Android 2.1+ και Internet Explorer 9+).
Γιατί η χρήση των media queries είναι απαραίτητη στο responsive design
Χωρίς τα CSS3 media queries, δεν θα ήταν δυνατή η χρήση διαφορετικών CSS στυλ, στοχεύοντας σε συγκεκριμένα χαρακτηριστικά, για παράδειγμα μιας κινητής συσκευής (smartphone), όπως το πλάτος ή η ανάλυση της οθόνης της.
Ανατρέχοντας στις προδιαγραφές της W3C για τα media queries, παρατηρείται πως η εισήγηση τους σχετικά με το τι είναι τελικά τα media queries, ακολουθεί ακριβώς αυτή την προσέγγιση:
Η HTML4 και το CSS2 υποστηρίζουν «media-dependent» style sheets, προσαρμοσμένα για διαφορετικά media types. Για παράδειγμα, ένα αρχείο μπορεί να χρησιμοποιεί sans-serif γραμματοσειρές κατά την εμφάνιση του στην οθόνη και serif γραμματοσειρές κατά την εκτύπωση του. To «screen» και το «print» είναι δύο διαφορετικά media types που έχουν οριστεί. Τα media queries επεκτείνουν τη λειτουργικότητα των media types, επιτρέποντας πιο ακριβείς ετικέτες στα style sheets.
Media queries syntax
Παρακάτω θα αναλυθεί το συντακτικό των media queries, καθώς και ο τρόπος με τον οποίο δουλεύουν, με τη χρήση παραδειγμάτων:
Παράδειγμα 1 (ενσωμάτωση media queries μέσα σε αρχείο CSS):
body {
background-color: black;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
Το παραπάνω κομμάτι κώδικα, στην ουσία αλλάζει το χρώμα του φόντου της ιστοσελίδας, ανάλογα με το πλάτος του παραθύρου του περιηγητή. Έτσι, αυξομειώνοντας χειροκίνητα το παράθυρο (ή χρησιμοποιώντας κάποιο απο τα πρόσθετα που αναλύθηκαν στο πρώτο μέρος της σειράς άρθρων για την responsive σχεδίασης), το αποτέλεσμα είναι το εξής:
- Για πλάτος παραθύρου μικρότερο από 320 pixels το χρώμα φόντου είναι πράσινο.
- Για πλάτος παραθύρου μικρότερο από 550 pixels, αλλά μεγαλύτερο από 320 pixels το χρώμα φόντου είναι κίτρινο.
- Για πλάτος παραθύρου μικρότερο από 768 pixels, αλλά μεγαλύτερο από 550 pixels το χρώμα φόντου είναι πορτοκαλί.
- Για πλάτος παραθύρου μικρότερο από 960 pixels, αλλά μεγαλύτερο από 768 pixels το χρώμα φόντου είναι κόκκινο.
- Για πλάτος παραθύρου μεγαλύτερο από 960 pixels το χρώμα φόντου είναι μαύρο.
Παράδειγμα 2 (φόρτωση CSS αρχείου υπό όρους – συνθήκες στο head της ιστοσελίδας):
<link rel="stylesheet" media="screen and (orientation: portrait)" href="screen-portrait.css" />
Η ενσωμάτωση της παραπάνω γραμμής κώδικα στο head της ιστοσελίδας, στην ουσία προτρέπει τον περιηγητή του χρήστη να φορτώσει το αρχείο screen-portrait.css εφόσον το media-type είναι οθόνη και ο προσανατολισμός της οθόνης είναι κάθετος.
Η παραπάνω γραμμή κώδικα μπορεί να γίνει αρκετά πολύπλοκη, προσθέτοντας περισσότερες συνθήκες:
<link rel="stylesheet" media="screen and (orientation: portrait) and (max-width: 600px)" href="screen-portrait-600.css" />
Το αρχείο screen-portrait-600.css θα φορτωθεί αν και μόνο αν το media-type είναι οθόνη πλάτους μικρότερου των 600 pixels και ο προσανατολισμός της οθονης είναι κάθετος.
Παράδειγμα 3 (φόρτωση CSS αρχείου υπό όρους – συνθήκες μέσα σε άλλο αρχείο CSS):
@import url("small-device.css") screen and (max-width:360px);
Με τη χρήση του @import, το αρχείο «small-device.css» θα ενσωματωθεί στο αρχείο CSS που περιέχει την συγκεκριμένη γραμμή κώδικα εφόσον το media-type είναι οθόνη με μέγιστο πλάτος τα 360 pixels. Η χρήση του @import καλό είναι να αποφεύγεται, καθώς προσθέτει http αιτήματα (http requests) και αυξάνει τον χρόνο φόρτωσης της ιστοσελίδας (loading time).
Σε τι μπορούμε να στοχεύσουμε με τα media queries
Κατασκευάζοντας ιστοτόπους με την τεχνική της responsive σχεδίασης, τα media queries που συνήθως χρησιμοποιούνται σχετίζονται με το πλάτος του παρθύρου της συσκευής (width) και το πλάτος της οθόνης της συσκευής (device-width). Παρ’όλα αυτά, ακολουθεί μια λίστα με τις σημαντικότερες συνθήκες που μπορούν να στοχευθούν, χρησιμοποιώντας τα media queries:
- width: Το πλάτος του παραθύρου.
- height: Το ύψος του παραθύρου.
- device-width: Το πλάτος της οθόνης της συσκευής.
- device-height: Το ύψος της οθόνης της συσκευής.
- orientation: Ο προσανατολισμός της οθόνης της συσκευής (κάθετος ή οριζόντιος)
- aspect-ratio: Η αναλογία πλάτους – ύψους σύμφωνα με το πλάτος και το ύψος του παραθύρου.
- device-aspect-ratio: Η αναλογία πλάτους – ύψους σύμφωνα με το πλάτος και το ύψος της οθόνης της συσκευής.
- color: Ο αριθμός των bit ανά συνιστώσα χρώματος.
- resolution: Η ανάλυση της οθόνης.
Όλα τα παραπάνω μπορούν να συνδυαστούν με το min και το max, ώστε να οριστεί το εύρος για το οποίο η συνθήκη θα πραγματοποιηθεί. Για παράδειγμα:
@import url("small-device.css") screen and (min-width:200px) and (max-width:360px);
Το αρχείο small-device.css θα ενσωματωθεί στο αρχείο CSS που περιέχει την συγκεκριμένη γραμμή κώδικα, αν και μόνο αν το media-type είναι οθόνη πλάτους μικρότερου των 360 pixels και μεγαλύτερο των 200 pixels.
Συνοψίζοντας
Η χρήση των media queries για την αλλαγή του σχεδιασμού είναι μια εξαιρετική στρατηγική, αν ο σχεδιασμός γίνεται για συγκεκριμένη συσκευή, για την οποία ο προγραμματιστής γνωρίζει τις ακριβείς διαστάσεις της.
Αυξομειώνοντας το μέγεθος του παραθύρου, ο σχεδιασμός της ιστοσελίδας αλλάζει κάθε φορά που το πλάτος του παραθύρου γίνεται μικρότερο από το σημείο-καμπής (break-point) που έχει οριστεί με τη χρήση των media queries. Όμως παραμένει στατικός, μέχρι το πλάτος του παραθύρου να φτάσει το επόμενο break-point, στο οποίο έχει οριστεί μια νέα αλλαγή στον σχεδιασμό και τη δομή της ιστοσελίδας. Με λίγα λόγια, αν ο προγραμματιστής στοχεύει σε συγκεκριμένες συσκευές, γνωστών διαστάσεων, αυτή η στρατηγική είναι η βέλτιστη λύση για την προσαρμογή του σχεδιασμού.
Ωστόσο, με αυτόν τον τρόπο, ο προγραμματιστής δεν προνοεί για το μέλλον. Δεν προνοεί για συσκευές που θα κυκλοφορήσουν μελλοντικά και τη στιγμή που πραγματοποιεί τον σχεδιασμό, δε γνωρίζει τις διαστάσεις τους. Για έναν πραγματικά future-proof σχεδιασμό, ο οποίος θα ανταποκρίνεται στη λογική της responsive σχεδίασης, η λύση είναι, αντί της άκαμπτης και σταθερής διάταξης (fixed layout), η υιοθέτηση της ρευστής διάταξης (fluid layout). Τα media queries είναι απαραίτητο συστατικό για την επίτευξη της responsive σχεδίασης, αλλά χωρίς το fluid layout, δε μπορεί να υπάρξει ομαλή μετάβαση από το ένα break-point στο επόμενο, κάτι που είναι εξίσου ουσιώδες.
Αφήστε το σχόλιο σας