Η διαφορά μεταξύ CSS2 και CSS3

Κατανοώντας τις σημαντικές αλλαγές στο CSS3

Η μεγαλύτερη διαφορά μεταξύ CSS2 και CSS3 είναι ότι το CSS3 έχει χωριστεί σε διαφορετικά τμήματα, που ονομάζονται modules. Κάθε μία από αυτές τις ενότητες κάνει το δρόμο της μέσω του W3C σε διάφορα στάδια της διαδικασίας σύστασης. Αυτή η διαδικασία έχει κάνει πολύ πιο εύκολο για διάφορα κομμάτια του CSS3 να γίνονται αποδεκτά και να υλοποιούνται στο πρόγραμμα περιήγησης από διαφορετικούς κατασκευαστές.

Εάν συγκρίνετε αυτή τη διαδικασία με αυτό που συνέβη με το CSS2, όπου όλα υποβλήθηκαν ως ένα ενιαίο έγγραφο με όλες τις πληροφορίες του Cascading Style Sheets μέσα σε αυτό, αρχίζετε να βλέπετε τα πλεονεκτήματα της κατάργησης της σύστασης σε μικρότερα μεμονωμένα κομμάτια. Επειδή κάθε μία από τις ενότητες επεξεργάζεται μεμονωμένα, έχουμε ένα πολύ ευρύτερο φάσμα υποστήριξης προγράμματος περιήγησης για τις λειτουργικές μονάδες CSS3.

Όπως και με κάθε νέα και μεταβαλλόμενη προδιαγραφή, βεβαιωθείτε ότι έχετε δοκιμάσει προσεκτικά τις σελίδες σας CSS3 σε τόσα προγράμματα περιήγησης και λειτουργικά συστήματα όσο μπορείτε. Θυμηθείτε ότι ο στόχος δεν είναι να δημιουργήσετε ιστοσελίδες που να φαίνονται ακριβώς ίδιες σε κάθε πρόγραμμα περιήγησης, αλλά να διασφαλίσετε ότι όλα τα στυλ που χρησιμοποιείτε, συμπεριλαμβανομένων των στυλ CSS3, θα φαίνονται υπέροχα στα προγράμματα περιήγησης που τα υποστηρίζουν και ότι θα επιστρέψουν χαριτωμένα για παλαιότερα προγράμματα περιήγησης μην.

Νέοι επιλογείς CSS3

Το CSS3 προσφέρει ένα σωρό νέους τρόπους με τους οποίους μπορείτε να γράψετε κανόνες CSS με νέους επιλογείς CSS, καθώς και έναν νέο συνδυαστή και μερικά νέα ψευδο-στοιχεία.

Τρεις νέοι επιλογείς χαρακτηριστικών:

• Η αρχή του στοιχείου αντιστοιχεί ακριβώς στο στοιχείο [foo ^ = "bar"] Το στοιχείο έχει ένα χαρακτηριστικό που ονομάζεται foo που αρχίζει με "bar" π.χ.
• Το χαρακτηριστικό που τελειώνει αντιστοιχεί ακριβώς στο στοιχείο [foo $ = "bar"] Το στοιχείο έχει ένα χαρακτηριστικό που ονομάζεται foo και τελειώνει με "bar" π.χ.
• Το χαρακτηριστικό περιέχει το στοιχείο αντιστοίχισης [foo * = "bar"] Το στοιχείο έχει ένα χαρακτηριστικό που ονομάζεται foo που περιέχει τη συμβολοσειρά "bar" π.χ.

16 νέες ψευδο-κατηγορίες:

• :ρίζα
  • Το ριζικό στοιχείο του εγγράφου. Σε HTML αυτό είναι πάντα.
• : n-παιδί (n)
  • Χρησιμοποιήστε αυτό για να ταιριάξετε τα ακριβή στοιχεία του παιδιού ή χρησιμοποιήστε μεταβλητές για να λάβετε εναλλασσόμενες αντιστοιχίσεις.
• : nth-last-child (n)
  • Ταίριασμα των ακριβών στοιχείων παιδιών που μετράνε από το τελευταίο.
• : n-ο-τύπου (n)
  • Ταιριάζουν τα αδέσποτα στοιχεία με το ίδιο όνομα πριν από αυτό στο δέντρο εγγράφων.
• : n-τελευταίου τύπου (n)
  • Ταίριασμα των αδελφών στοιχείων με το ίδιο όνομα που μετράνε από κάτω.
• :τελευταίο παιδί
  • Ταιριάζει με το τελευταίο παιδικό στοιχείο του γονέα.
• : πρώτος τύπου
  • Ταίριασμα του πρώτου αδελφικού στοιχείου αυτού του τύπου.
• : τελευταίο του τύπου
  • Ταιριάξτε με το τελευταίο στοιχείο του αδελφού αυτού του τύπου.
• :μοναχοπαίδι
  • Αντιστοιχεί το στοιχείο που είναι το μόνο παιδί του γονέα του.
• : μόνο τύπου
  • Αντιστοιχεί το στοιχείο που είναι το μόνο του τύπου του.
• :αδειάζω
  • Ταίριασμα του στοιχείου που δεν έχει παιδιά (συμπεριλαμβανομένων των κόμβων κειμένου).
• :στόχος
  • Ταίριασμα ενός στοιχείου που είναι ο στόχος του αναφερόμενου URI.
• : ενεργοποιημένη
  • Ταίριασμα του στοιχείου όταν είναι ενεργοποιημένη.
• :άτομα με ειδικές ανάγκες
  • Ταίριασμα του στοιχείου όταν είναι απενεργοποιημένο.
• :τετραγωνισμένος
  • Ταίριασμα του στοιχείου όταν αυτό είναι επιλεγμένο (κουμπιά επιλογής ή πλαίσιο ελέγχου).

• : δεν (ες)
  • Ταίριασμα όταν το στοιχείο δεν ταιριάζει με τον απλό επιλογέα s.

Ένας νέος συνδυαστής:

• στοιχείοA ~ στοιχείοB
  • Ταίριασμα όταν το στοιχείο Β ακολουθεί κάπου μετά το στοιχείοA, όχι απαραίτητα αμέσως.

Νέες ιδιότητες

Το CSS3 εισήγαγε επίσης μια σειρά από νέες ιδιότητες CSS. Πολλές από αυτές τις ιδιότητες ήταν να δημιουργηθούν οπτικά στυλ που πιθανόν να συσχετίζονται περισσότερο με ένα γραφικό πρόγραμμα όπως το Photoshop. Ορισμένα από αυτά, όπως η ακτίνα ακτίνων ή η σκιά κουτιού, είναι γύρω από την εισαγωγή του CSS3. Άλλοι, όπως το flexbox ή ακόμα και το CSS Grid, είναι νεώτερα στυλ που θεωρούνται ακόμα συχνά CSS3 προσθήκες.

Στο CSS3, το μοντέλο κουτιού δεν έχει αλλάξει. Αλλά υπάρχει μια δέσμη νέων ιδιοτήτων στυλ που μπορούν να σας βοηθήσουν να στυλ το φόντο και τα όρια των κιβωτίων σας.

Πολλαπλό υπόβαθρο I mages

Χρησιμοποιώντας τα στυλ φόντου, εικόνας, θέσης φόντου και επανάληψης φόντου, μπορείτε να ορίσετε πολλές εικόνες φόντου που θα τοποθετηθούν στο επάνω μέρος του πλαισίου. Η πρώτη εικόνα είναι η στρώση που βρίσκεται πλησιέστερα στον χρήστη, με τις ακόλουθες χρωματισμένες πίσω. Αν υπάρχει χρώμα φόντου, είναι βαμμένο κάτω από όλα τα επίπεδα εικόνας.

Νέες ιδιότητες στυλ φόντου

Υπάρχουν επίσης κάποιες νέες ιδιότητες φόντου στο CSS3.

• κλιπ φόντου
  • Αυτή η ιδιότητα ορίζει πώς πρέπει να αποκοπεί η εικόνα φόντου. Η προεπιλογή είναι το πλαίσιο περιγράμματος, αλλά μπορεί να αλλάξει στο πλαίσιο παρεμβολής ή στο πλαίσιο περιεχομένου.
• αρχική προέλευση
  • Αυτή η ιδιότητα καθορίζει εάν το φόντο θα πρέπει να τοποθετείται στο πλαίσιο παραγεμίσματος, στο πλαίσιο περιγράμματος ή στο πλαίσιο περιεχομένου.
• μέγεθος φόντου
  • Αυτή η ιδιότητα σάς επιτρέπει να υποδείξετε το μέγεθος της εικόνας φόντου. Σας επιτρέπει να τεντώσετε μικρότερες εικόνες ώστε να ταιριάζουν στη σελίδα.

Αλλαγές στις υπάρχουσες ιδιότητες στυλ φόντου

Υπάρχουν επίσης κάποιες αλλαγές στις υπάρχουσες ιδιότητες στυλ φόντου:

• background-repeat
  • Υπάρχουν δύο νέες τιμές για αυτήν την ιδιότητα: χώρο και στρογγυλό. Διαστήματος χώρος η εικόνα πλακιδίων ομοιόμορφα εντός του κουτιού χωρίς να κόβεται. Ο στρογγυλός μετασχηματίζει την εικόνα φόντου έτσι ώστε να πλακάει πολλές φορές στο κουτί.
• προσάρτηση φόντου
  • Προστίθεται μια νέα τιμή "τοπική" έτσι ώστε το φόντο να μετακινηθεί με το περιεχόμενο του στοιχείου όταν το στοιχείο έχει μια γραμμή κύλισης.
• Ιστορικό
  • Η ιδιότητα shorthand του φόντου προσθέτει τις ιδιότητες μεγέθους και προέλευσης.

CSS3 σύνορα ιδιότητες

Στο CSS3 τα σύνορα μπορούν να είναι τα στυλ που συνηθίζουμε (στερεά, διπλά, διακεκομμένα κ.λπ.) ή μπορούν να είναι μια εικόνα. Επιπλέον, το CSS3 προσφέρει τη δυνατότητα δημιουργίας στρογγυλεμένων γωνιών. Οι εικόνες των συνόρων είναι ενδιαφέρουσες επειδή δημιουργείτε μια εικόνα και των τεσσάρων συνόρων και στη συνέχεια πείτε στο CSS πώς να εφαρμόσετε αυτήν την εικόνα στα σύνορά σας.

Νέες ιδιότητες στυλ περιγράμματος

Υπάρχουν ορισμένες νέες ιδιότητες των συνόρων στο CSS3:

• ακτίνα ακριβείας
  • κορυφή-δεξιά-ακτίνα , περίγραμμα-κάτω-δεξιά-ακτίνα , ακμή-κάτω-αριστερά-ακτίνα ,
  • Αυτές οι ιδιότητες σάς επιτρέπουν να δημιουργείτε στρογγυλεμένες γωνίες στα σύνορά σας.
• σύνορα-πηγή εικόνας
  • Καθορίζει το αρχείο προέλευσης εικόνας που πρόκειται να χρησιμοποιηθεί αντί για ήδη καθορισμένα στυλ περιγράμματος.
• φραγή εικόνας-ορίου
  • Αντιπροσωπεύει τις εσωτερικές μετατοπίσεις από τις ακμές εικόνας του περιγράμματος
• πλάτος εικόνας-ορίου
  • Ορίζει την τιμή του πλάτους για την εικόνα περιθωρίου.
• αρχική εικόνα εικόνας
  • Καθορίζει το ποσό που η περιοχή εικόνας του περιθωρίου εκτείνεται πέρα ​​από το πλαίσιο περιγράμματος.
• οριζόντια εικόνα-τέντωμα
  • Ορίζει πώς τα πλευρικά και μεσαία τμήματα της εικόνας των περιθωρίων πρέπει να είναι πλακάκια ή κλίμακα.
• συνοριακή εικόνα
  • Η ιδιότητα στενογραφία για όλες τις ιδιότητες εικόνας περιγράμματος.

Πρόσθετες ιδιότητες CSS3 που σχετίζονται με σύνορα και φόντο

Όταν ένα πλαίσιο σπάσει σε διάλειμμα σελίδας, σπάσιμο στήλης για σπάσιμο γραμμής (για στοιχεία γραμμής) η ιδιότητα διακόσμησης πλαισίου-διακόσμησης καθορίζει τον τρόπο με τον οποίο τυλίγονται τα νέα πλαίσια με περιγράμματα και παραγεμίσματα. Τα υπόβαθρα μπορούν να χωριστούν μεταξύ πολλών σπασμένων πλαισίων χρησιμοποιώντας αυτήν την ιδιότητα.

Υπάρχει επίσης μια ιδιότητα σκιάς κουτιού που μπορεί να χρησιμοποιηθεί για να προσθέσει σκιές σε στοιχεία κουτιού.

Με το CSS3, μπορείτε να ρυθμίσετε εύκολα μια ιστοσελίδα με πολλαπλές στήλες χωρίς πίνακες ή περίπλοκες δομές tag div. Μπορείτε απλά να πείτε στο πρόγραμμα περιήγησης πόσες στήλες πρέπει να έχει το στοιχείο του σώματος και πόσο θα πρέπει να είναι. Επιπλέον, μπορείτε να προσθέσετε σύνορα (κανόνες), χρώματα φόντου που καλύπτουν το ύψος της στήλης και το κείμενό σας θα μεταφερθεί αυτόματα σε όλες τις στήλες.

Στήλες CSS3 - Καθορίστε τον αριθμό και το πλάτος των στηλών

Υπάρχουν τρεις νέες ιδιότητες που σας επιτρέπουν να ορίσετε τον αριθμό και το πλάτος των στηλών σας:

• πλάτος στήλης
  • Ορίζει το πλάτος που πρέπει να είναι οι στήλες σας. Στη συνέχεια, το πρόγραμμα περιήγησης θα περάσει το κείμενο για να γεμίσει το διάστημα με κορμούς τόσο ευρείες.
• μέτρηση στήλης
  • Ορίζει τον αριθμό των στηλών στη σελίδα. Το πρόγραμμα περιήγησης θα δημιουργήσει στη συνέχεια στήλες αρκετά πλατιά ώστε να ταιριάζουν στο χώρο, αλλά μόνο τον αριθμό που καθορίζετε.
• στήλες
  • Χαρακτηριστική ιδιότητα, όπου μπορείτε να ορίσετε είτε το πλάτος είτε τον αριθμό (ή και τα δύο, αλλά αυτό σπάνια έχει νόημα).

Διαστήματα και κανόνες στήλης CSS3

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

• κενό στη στήλη
  • Ορίζει το πλάτος των κενών μεταξύ των στηλών.
• στήλη-κανόνας-χρώμα
  • Ορίζει το χρώμα του κανόνα.
• στήλη-στυλ κανόνα
  • Ορίζει το στυλ του κανόνα (σταθερό, διακεκομμένο, διπλό, κ.λπ.).
• πλάτος κανόνα στήλης
  • Ορίζει το πλάτος του κανόνα.
• κανόνας στήλης
  • Μια ιδιότητα στενογραφία που ορίζει και τις τρεις ιδιότητες κανόνα στήλης ταυτόχρονα.

Διαλείμματα στήλης CSS3, στήλες κλιμάκωσης και στήλες πλήρωσης

Τα διαλείμματα στη στήλη χρησιμοποιούν τις ίδιες επιλογές CSS2 που χρησιμοποιούνται για τον ορισμό διαλείμματος σε περιεχόμενο σε σελίδες, αλλά με τρεις νέες ιδιότητες: διάλειμμα πριν , διάλειμμα και σπάσιμο .

Όπως και με τους πίνακες, μπορείτε να ορίσετε στοιχεία που να καλύπτουν τις στήλες με την ιδιότητα της έκτασης της στήλης. Αυτό σας επιτρέπει να δημιουργήσετε τίτλους που καλύπτουν πολλές στήλες περισσότερο σαν μια εφημερίδα.

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

Περισσότερες δυνατότητες στο CSS3 που δεν περιλαμβάνονται στο CSS2

Υπάρχουν πολλά επιπλέον χαρακτηριστικά στο CSS3 που δεν υπήρχαν στο CSS2, όπως:

• Μονάδα διαμόρφωσης προτύπου CSS και CSS3 Μονάδα τοποθέτησης πλέγματος : Δημιουργία πλέγματος με CSS.
• CSS3 Μονάδα κειμένου : Σχεδιάστε κείμενο και δημιουργήστε ακόμη και σκιές με CSS.
• CSS3 Έγχρωμη μονάδα : Τώρα με αδιαφάνεια.
• Αλλαγές στο μοντέλο του κουτιού : Συμπεριλαμβανομένης της ιδιότητας marquee που ενεργεί όπως η ετικέτα IE.
• Μονάδα διασύνδεσης χρήστη CSS3 : Παρέχοντας νέους δρομείς, απαντήσεις σε ενέργειες, απαιτούμενα πεδία και ακόμη και στοιχεία αλλαγής μεγέθους .
• Αναφορές μέσων : Τα ερωτήματα μέσων σας επιτρέπουν μεγαλύτερη ευελιξία κατά τον καθορισμό του τρόπου χρήσης ενός φύλλου στυλ. Για παράδειγμα, μπορείτε να ορίσετε ένα φύλλο στυλ που είναι μόνο για φορητές συσκευές που έχουν ένα viewport μεγαλύτερο από 20em.
• CSS3 Μονάδα Ruby : Παρέχει υποστήριξη για γλώσσες που χρησιμοποιούν κειμενικό ρουμπίνι για την επισήμανση εγγράφων.
• Μονάδα CSS3 Paged Media : Για ακόμη μεγαλύτερη υποστήριξη για σελίδες με έγχρωμη μορφή (χαρτί, διαφάνειες κλπ).
• Παραγόμενο περιεχόμενο : L κεφαλίδες και υποσέλιδα εκτέλεσης, υποσημειώσεις και άλλο περιεχόμενο που δημιουργείται προγραμματιστικά, ειδικά για σελίδες με έγχρωμη μορφή.
• CSS3 Μονάδα ομιλίας : Αλλαγές σε ακουστικό CSS.