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

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

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

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

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

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

• Το αρχικό χαρακτηριστικό ταιριάζει ακριβώς:

  στοιχείο [foo ^ = "bar"]

  Το στοιχείο έχει ένα χαρακτηριστικό που ονομάζεται foo και ξεκινά με "bar" π.χ.
• Το τελικό χαρακτηριστικό ταιριάζει ακριβώς:

  στοιχείο [foo $ = "bar"]

  Το στοιχείο έχει ένα χαρακτηριστικό που ονομάζεται foo και τελειώνει με "bar" π.χ.
• Το χαρακτηριστικό περιέχει τον αγώνα:

  στοιχείο [foo * = "bar"]

  Το στοιχείο έχει ένα Χαρακτηριστικό που ονομάζεται Φοο που περιέχει τη συμβολοσειρά "bar".

Έχουν εισαχθεί 16 νέες ψευδο-τάξεις:

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

Υπάρχει ένας νέος συνδυασμός:

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

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

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

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

Πολλαπλές εικόνες φόντου

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

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

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

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

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

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

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

Ιδιότητες περιγράμματος CSS3

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

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

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

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

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

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

Ενα νέο κουτί-σκιά Η ιδιότητα προσθέτει σκιές σε στοιχεία πλαισίου.

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

Ορίστε τον αριθμό και το πλάτος των στηλών

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

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

Κενά και κανόνες CSS3 στηλών

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

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

Διαλείμματα στηλών CSS3, στήλες που εκτείνονται και στήλες πλήρωσης

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

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

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

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

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

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