Η κατασκευή σύνθετων, ευέλικτων σχεδίων δεν ήταν ποτέ εύκολη, αλλά το CSS3 έχει σίγουρα αφαιρέσει πολλούς πονοκεφάλους.
CSS3 χαρακτηριστικά, όπως Flexbox και Στήλες έχουν κάνει μερικές σύνθετες διατάξεις μια πραγματική δυνατότητα και τώρα συνδέονται με μία από τις νεότερες προσθήκες στην εργαλειοθήκη του web designer: CSS Regions.
Οι Περιοχές CSS σας επιτρέπουν να μεταφέρετε το περιεχόμενο σε μια σειρά από δοχεία σε μία σελίδα. Είναι το ισοδύναμο της σύνδεσης κειμένων σε μια εφαρμογή όπως το InDesign. Κάνει δυνατές κάποιες διατάξεις που ήταν προηγουμένως δυνατές μόνο με θόλωση της γραμμής μεταξύ δεδομένων και στυλ.
Όπως πάντα, η υποστήριξη του προγράμματος περιήγησης δεν είναι τελείως τέλεια.
Οι Περιφέρειες CSS είναι ακόμα ένα σχέδιο, που σημαίνει ότι είναι πειραματικό. Αρχικά, το μόνο πρόγραμμα περιήγησης που υποστήριξε στην πραγματικότητα ήταν ο Internet Explorer 10 (όχι, δεν γελάω). παρόλο που ο IE10 χρησιμοποιεί ένα iframe ως πηγή περιεχομένου.
Το Safari ισχυρίζεται ότι προσφέρει υποστήριξη με πρόθεμα.
Στο Chrome μπορείτε να δοκιμάσετε τη λειτουργία, ανοίγοντας το πρόγραμμα περιήγησής σας, πληκτρολογώντας 'about: flags' και ενεργοποιώντας τις 'enable-experimental-webkit-features' και στη συνέχεια επανεκκινώντας το πρόγραμμα περιήγησης.
Ευτυχώς υπάρχει επίσης α JavaScript polyfill που δημιουργήθηκε από την Adobe και φέρνει τη λειτουργικότητα των Περιφερειών CSS σε προγράμματα περιήγησης που αυτή τη στιγμή δεν την υποστηρίζουν, μπορείτε να τα βρείτε github.
Δεδομένου ότι ο σκοπός των Περιφερειών CSS είναι να επιτρέψει τη ροή του κειμένου μας σε διαφορετικά δοχεία, το πρώτο πράγμα που χρειάζεστε είναι κάποιο κείμενο:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.Και έπειτα μερικά δοχεία:
Τώρα έχουμε το βασικό περιεχόμενο που έχει ρυθμιστεί, μπορούμε να συνδέσουμε τα δοχεία με ροή και ροή από, θα παρατηρήσετε στο παράδειγμα που έχω προσθέσει το πρόθεμα -webkit .
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Εάν το κάνετε αυτό σε ένα πρόγραμμα περιήγησης, θα δείτε ότι το κείμενο θα μεταφερθεί απλά από το ένα πλαίσιο στο άλλο. Αν τοποθετήσετε τώρα αυτά τα δοχεία, το κείμενο θα συνεχίσει να τρέχει σωστά.
-webkit-flow-into: text-flow;Αυτή η ιδιότητα δέχεται ένα αναγνωριστικό ως τιμή. Όταν μεταβιβάσετε μια τιμή σε αυτήν την ιδιότητα, γίνεται μέρος μιας ονομαστικής ροής και θα σταματήσει την απόδοση ως μέρος της ροής της σελίδας. Μπορείτε να το ακυρώσετε, θέτοντας την ιδιότητα σε κανένα.
Το όνομα της ροής που χρησιμοποιείτε είναι αυθαίρετο, απλά βεβαιωθείτε ότι είστε συνεπείς. Μπορούμε επίσης να έχουμε πολλαπλά στοιχεία με την ίδια ονομαστική ροή όπως στο παραπάνω παράδειγμα.
Αυτό δεν περιορίζεται σε κείμενο, μπορούμε επίσης να μεταφέρουμε εικόνες, λίστες και πολλά άλλα είδη περιεχομένου HTML.
-webkit-flow-from: text-flow;Χρησιμοποιούμε αυτήν την ιδιότητα για να καθορίσουμε ποιο στοιχείο θα πρέπει να λαμβάνει τη συγκεκριμένη ροή.
Η τιμή είναι το όνομα της ροής που καθορίσαμε για την ιδιότητα ροής .
Έχετε υπόψη ότι όλα τα στυλ περιεχομένου που εφαρμόζετε στο αρχικό κείμενο θα διατηρηθούν σε όλη τη ροή. Επομένως, εάν χρωματίσετε το κείμενο μπλε, θα παραμείνει μπλε σε όλα τα δοχεία.
Για να δείτε ένα παράδειγμα περιφερειών CSS σε δράση, ρίξτε μια ματιά αυτό το στυλό Δημιουργησα.
Η υποστήριξη του προγράμματος περιήγησης για τις Περιφέρειες CSS είναι επί του παρόντος αδύναμη και υπάρχει πολύς δρόμος για να μπορέσουμε να την επικαλύψουμε σε καθημερινή βάση. Όμως, η ευελιξία που προσφέρει είναι φανταστική και, όταν έχει υπάρξει πλήρης υποστήριξη, πιστεύω ότι οι Περιφέρειες CSS θα είναι η τεχνική για τα επόμενα χρόνια.
Είστε ενθουσιασμένοι από τις Περιφέρειες CSS; Πόσο σύντομα πιστεύετε ότι θα μπορέσουμε να τα χρησιμοποιήσουμε; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα καταρράκτη μέσω cuatrok77.