Ελαστικό design με CSS @media queries

Το prince.gr έχει αλλάξει αρκετά στη version 3.0, αλλαγή που συνέπεσε με την ισάριθμη version του WordPress. Οι αισθητικές αλλαγές είναι ολοφάνερες αλλά έχει αλλάξει επίσης αρκετά το CSS που δίνει μορφή στο site. Η σημαντικότερη βελτίωση είναι που πλέον, το design προσαρμόζεται στην οθόνη του χρήστη. Δεν πρόκειται όμως για ένα «απλό» ελαστικό site…

Η διαφορά είναι στα @media queries. Μπορείτε τώρα να αλλάξετε το πλάτος του παραθύρου του browser, από 200-300 pixels μέχρι και full screen 1680 ή 1920 pixels και θα δείτε το περιεχόμενο του site να προσαρμόζεται -αρκετά επιτυχημένα ελπίζω- στο διαθέσιμο χώρο. Αν δεν σας αρέσει να αλλάζετε μέγεθος στα παράθυρά σας μπορείτε να ρίξετε μια ματιά στη σύνθεση από screenshots στα δεξιά και μπορείτε επίσης να δείτε το άρθρο απ'όπου πήρα την ιδέα. Αν βρίσκετε ενδιαφέρουσα την τεχνική, συνεχίστε!

Θα πρέπει ασφαλώς να ξεκινήσω διευκρινιζοντας πως τα @media queries είναι CSS 3 και, επομένως, ξεχάστε τον Internet Explorer — αν και, για να πω την αμαρτία μου, δεν έχω ακόμα κατεβάσει την δοκιμαστική του IE 9… Εν πάσει περιπτώσει, το website μου δουλεύει ικανοποιητικά σε IE 8, λιγότερο σε 7 και δεν έχω κάνει κανένα έλεγχο σε 6 αλλά νομίζω πως θα δείχνει άθλιο! Sorry, ο χρόνος μου είναι πολύτιμος και ο Internet Explorer 6 είναι 10 χρονών! Παρ'όλα αυτά, θα πρέπει να σταθμίσετε τα υπερ και τα κατά σε κάθε project ξεχωριστά — στο website που ήδη διαβάζετε, απευθύνομαι σε web developers που οφείλουν να γνωρίζουν τις νεώτερες εξελίξεις στο χώρο και έχω την πολυτέλεια να δηλώσω πως δεν υποστηρίζω IE 7 και 6.

Τα @media queries είναι η φυσική -ας πούμε- εξέλιξη των διαφορετικών CSS για διαφορετικό μέσο / χρήση που φτιάχναμε μέχρι τώρα. Συνήθως φτιάχνουμε ένα (τουλάχιστον) CSS για default χρήση (στην οθόνη, screen) και ένα για εκτύπωση (print) ενώ στα specs (media descriptors) υπάρχουν ακόμα αρκετές δυνατότητες που δεν πολυ-χρησιμοποιούνται. Επίσης, θα πρέπει να ομολογήσω πως δεν έχω ασχοληθεί σε βάθος με τις δυνατότητες που παρέχονται — χρησιμοποιήσα απλώς ένα μικρό μέρος αυτών. Ας δούμε όμως λίγο κώδικα (μόνο τα σχετικά με το θέμα μας κομμάτια, ολόκληρο το CSS είναι στη διάθεση όποιου ξέρει να το βρει, αλλιώς δεν το χρειάζεται!)…

#container 			{ margin:2em auto; width:95%; }
#content 			{ float:left; width:68%; }
#sidebar 			{ float:right; position:relative; width:30%; }
.amzshcs_container 	{ padding:1%; position:relative; width:98%; }
.comment_block 		{ display:inline-block; margin:0 0 20px 82px; margin-bottom:20px; padding:10px; }
.links 				{ margin:0 0 20px 0; padding:0; width:100%; }
.mainMenu 			{ display:table; margin:0 0 20px 0; padding:0; width:100%; }
.mainMenu li 		{ display:table-cell; font-size:1.2em; list-style:none; margin:0; padding:2px 0 4px 0; text-align:center; width:10%; }
.navigation 		{ clear:both; margin:2em 0 2em 82px; overflow:hidden; text-align:center; }
.random_photo_thumb { line-height:0.1%; margin:0 0 20px 0; overflow:hidden; padding:1%; width:98%; }
.tag_cloud 			{ margin:0 0 20px 0; width:100%; }

Οι παραπάνω κανόνες αφορούν στα περισσότερα από τα blocks που σχηματίζουν το περιεχόμενο της σελίδας. Οι μόνοι κανόνες που ίσως να θέλουν εξήγηση είναι του βασικού μενού (.mainMenu) στους οποίους όμως θα αναφερθώ σε κάποιο άλλο άρθρο. Μέχρι τότε, ο ppk έχει αφιερώσει ένα κομμάτι στο display:table. Ας δούμε επιτέλους λίγα @media queries στην πράξη:

@media (min-width: 1900px) {
	#container 				{ width:90%; }
	.amzshcs_container,
	.random_photo_thumb		{ clear:right; float:right; width:48%; }
	.links, .tag_cloud 		{ clear:left; float:left; width:48%; }
}

@media (min-width: 1400px) {
	#content 				{ width:60%; }
	#sidebar 				{ width:38%; }
	.amzshcs_container,
	.random_photo_thumb		{ clear:right; float:right; width:48%; }
	.links, .tag_cloud 		{ clear:left; float:left; width:48%; }
}

@media (max-width: 960px) {
	pre 					{ width:540px; }
	#commentlist .avatar 	{ float:left; margin-left:0; margin-right:8px; padding:0px; }
	#content 				{ float:none; width:100%; }
	#sidebar 				{ float:none; width:100%; }
	.comment_block 			{ margin-left:0; }
	.links,
	.random_photo_thumb 	{ display:none; }
	.post 					{ margin-left:0; }
	.post_info 				{ float:none; margin-left:0; width:auto; }
}

@media (max-width: 480px) {
	pre 					{ width:340px; }
	#commentlist .avatar 	{ display:none; }
	#content 				{ float:none; width:100%; }
	#header 				{ font-size:1.5em; margin-left:0; text-align:center; width:100%; }
	#sidebar 				{ float:none; width:100%; }
	.amzshcs_container,
	.links,
	.tag_cloud,
	.random_photo_thumb 	{ display:none; }
	.mainMenu 				{ display:block; overflow:hidden; }
	.mainMenu li 			{ display:block; float:left; padding:2px 6px 4px 6px; white-space:nowrap; width:auto; }
	.mainMenu li a 			{ display:inline; }
	.navigation 			{ margin-left:0; }
	.post 					{ margin-left:0; }
	.post_info 				{ float:none; width:auto; }
	.thumb 					{ display:none; }
}

Τα δύο queries που χρησιμοποιώ είναι τα min-width και max-width ή αλλιώς, το πλάτος του παραθύρου του χρήστη, σε pixels. Ο πρώτος έλεγχος αφορά παράθυρο με πλάτος μεγαλύτερο από 1900px ( @media (min-width: 1900px) {…} ). Προσέξτε τις αγκύλες που οριοθετούν τους κανόνες που θα εφαρμοστούν αν ισχύει η συνθήκη «ελάχιστο-πλάτος: 1900pixels». Οι ίδιοι οι κανόνες είναι standard CSS που, επειδή βρίσκονται πιο κάτω στο ίδιο αρχείο, έχουν προτεραιότητα έναντι εκείνων που είδαμε παραπάνω. Στο πρώτο μπλοκ λοιπόν, ρυθμίζω λίγο μικρότερο το πλάτος του #container και μετακινώ μερικά μπλοκς της πλαϊνής κολώνας με τέτοιο τρόπο ώστε να σχηματίσω 3στηλο. Ακουλουθούν οι ρυθμίσεις για περισσότερα από 1400 pixels πλάτος όπου, ότι δεν έχω κάνει overwrite στο προηγούμενο, πιο συγκεκριμένο μπλοκ, θα εξακολουθήσει να ισχύει ΚΑΙ για πάνω από 1900. Σε αυτή τη ρύθμιση αλλάζω τα πλάτη των δύο βασικών στηλών του site από 68/30% σε 60/38%, δίνοντας έτσι περισσότερο χώρο στο #sidebar, «προετοιμάζοντας» το έδαφος για τη μετατροπή σε 3στηλο.

Αμέσως μετά έχω τους κανόνες για «μέχρι 960 pixels» όπου έχει έρθει η ώρα να αρχίσω να κρύβω μπλοκς τα οποία δεν είναι απαραίτητα, για να κερδίσω χώρο, ενώ οι 2 βασικές κολώνες του site (#content και #sidebar) … δεν είναι πλέον κολώνες αφού ρυθμίζω float:none και width:100%! Ταυτόχρονα μετακινώ το .post-info, το στρογγυλεμένο «αυτάκι» με την ημερομηνία καταχώρησης του άρθρου. Τέλος, αν ο χρήστης έχει πολύ στενό παράθυρο, μικρότερο ή ίσο με 480 pixels, όπως σε ένα κινητό τηλέφωνο με κανονικό browser π.χ., κρύβω (display:none) αρκετά ακόμα μέρη του site, αλλάζω εντελώς στυλ στο βασικό μενού ώστε να χωράει στην οθόνη και μένει μόνο το περιεχόμενο που, εντάξει, σε μερικές σελίδες όπως αυτή που έχει κώδικα και screenshot ίσως κατά τόπους να «σπάει» το design αλλά σίγουρα απαιτεί λιγότερο zoom και διευκολύνει αρκετά τον browser του χρήστη.

Ορίστε λοιπόν, ένα website που «παίζει» παντού! Ή σχεδόν παντού, υπάρχουν πολλά πολλά περιθώρια για βελτίωση αλλά, είναι μια καλή αρχή!

(Βαθμολογία: +3, ψήφοι: 3)

 Loading ...

TrackBack URL