60+ κορυφαίες ερωτήσεις και απαντήσεις για συνεντεύξεις CSS (2026)
Έμμα Ντέιβις
Ετοιμάζεστε για μια συνέντευξη CSS; Ήρθε η ώρα να βελτιώσετε τις γνώσεις σας σχετικά με τα βασικά στοιχεία και όχι μόνο. Κατανόηση Συνέντευξη CSS Οι ερωτήσεις μπορούν να αποκαλύψουν πόσο βαθιά κατανοούν οι υποψήφιοι τη δομή του σχεδιασμού και τη λογική του στυλ.
Μια καριέρα στην ανάπτυξη CSS ανοίγει πόρτες σε ποικίλες ευκαιρίες, από το front-end design έως τις responsive web εφαρμογές. Με τεχνική εμπειρία, εξειδίκευση στον τομέα και ισχυρές δεξιότητες ανάλυσης, οι επαγγελματίες μπορούν να επιδείξουν προηγμένες δεξιότητες που εκτιμούν οι ηγέτες ομάδων και οι διευθυντές. Αυτές οι ερωτήσεις και οι απαντήσεις βοηθούν τους νέους, μεσαίου επιπέδου και ανώτερους προγραμματιστές να περάσουν τις συνεντεύξεις με σιγουριά και αποτελεσματικότητα.
Αντλώντας από πληροφορίες που μοιράζονται περισσότεροι από 85 επαγγελματίες, συμπεριλαμβανομένων τεχνικών ηγετών, διευθυντών και ειδικών προσλήψεων, αυτός ο οδηγός συγκεντρώνει αξιόπιστες πρακτικές συνεντεύξεων σε όλους τους κλάδους, διασφαλίζοντας την ακρίβεια, τη συνάφεια και την αξιοπιστία για όλα τα επίπεδα εμπειρίας.
Κορυφαίες ερωτήσεις και απαντήσεις για συνεντεύξεις CSS
1) Εξηγήστε τον σύγχρονο καταρράκτη CSS, συμπεριλαμβανομένου @layer, εξειδίκευση και σειρά πηγών.
Η ακολουθία αποφασίζει ποιος κανόνας «κερδίζει» όταν πολλαπλοί κανόνες στοχεύουν στο ίδιο στοιχείο. Η απόφαση προχωρά κατά σημασία ( !important ), προέλευση (πράκτορας χρήστη, χρήστης, συγγραφέας), τότε σειρά στρώσεων από @layer, ακολουθούμενο από την εξειδίκευση και τέλος τη σειρά των πηγών. Χρησιμοποιώντας @layer σας επιτρέπει να ορίσετε προβλέψιμα επίπεδα όπως επαναφορά, βάση, στοιχεία και βοηθητικά προγράμματα, έτσι ώστε ολόκληρες ομάδες κανόνων να παρακάμπτουν άλλες χωρίς να αυξάνουν την εξειδίκευση του επιλογέα. Το κύριο πλεονέκτημα είναι η συντηρησιμότητα. Το κύριο μειονέκτημα είναι ότι η λανθασμένη σειρά επιπέδων μπορεί να κρύψει σφάλματα. Προτιμήστε επιλογείς κλάσης χαμηλής εξειδίκευσης, κάντε κράτηση. !important για σκόπιμες πολιτικές και διατηρήστε την αρχιτεκτονική ευανάγνωστη.
Απαντήστε με παραδείγματα
@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }
👉 Δωρεάν Λήψη PDF: Ερωτήσεις Συνέντευξης CSS
2) Πώς διαφέρουν τα ερωτήματα κοντέινερ από τα ερωτήματα πολυμέσων και πού θα χρησιμοποιούσατε το καθένα;
Τα ερωτήματα κοντέινερ ανταποκρίνονται στο μέγεθος ή το στυλ ενός περιέχον στοιχείο, καθιστώντας τα στοιχεία αυτογνωσμένα και επαναχρησιμοποιήσιμα σε διαφορετικά περιβάλλοντα. Τα ερωτήματα πολυμέσων ανταποκρίνονται σε θύρα προβολής ή χαρακτηριστικά συσκευών και λάμψη για καθολικές αλλαγές διάταξης. Τα ερωτήματα κοντέινερ επιτρέπουν στις κάρτες, τα γραφικά στοιχεία και τις ένθετες ενότητες να προσαρμόζονται τοπικά. Τα ερωτήματα πολυμέσων παραμένουν ιδανικά για πλοήγηση σε ολόκληρο τον ιστότοπο ή αλλαγές στο κέλυφος. Τα πλεονεκτήματα των ερωτημάτων κοντέινερ περιλαμβάνουν λεπτότερη λεπτομέρεια και λιγότερα καθολικά σημεία διακοπής. Τα μειονεκτήματα περιλαμβάνουν τη ρύθμιση μέσω container-type και προσεκτική επιλογή ορίων.
Διαφορά μεταξύ (συγκριτικός πίνακας)
| Παράγοντας | Ερωτήματα Media | Ερωτήματα κοντέινερ |
|---|---|---|
| Σκανδάλη | Χαρακτηριστικά θύρας προβολής | Μέγεθος ή στυλ κοντέινερ |
| Scope | Σε ολόκληρη τη σελίδα | Τοπικό στοιχείο |
| Ρύθμιση | Κανένα πέρα από το ερώτημα | Απαιτεί container-type / προαιρετικό όνομα |
| καλυτερα for | Παγκόσμια σημεία διακοπής | Παραλλαγές κάρτας ή widget |
Απαντήστε με παραδείγματα
/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
.card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}
3) Ποια είναι τα χαρακτηριστικά και τα οφέλη του :has(), και πώς συγκρίνεται με :is() και :where() ?
Η σχεσιακή ψευδοκλάση :has() επιλέγει ένα στοιχείο με βάση τους απογόνους του ή το επόμενο μοτίβο, επιτρέποντας τη διαμόρφωση γονικής κατάστασης χωρίς JavaΣενάριο. Αυτό είναι ισχυρό για ομάδες επικύρωσης φόρμας, καταστάσεις πλοήγησης ή διακόπτες πυκνότητας. Αντίθετα, :is() και :where() απλοποιήστε τις μεγάλες λίστες επιλογής· :where() συνεισφέρει μηδενική εξειδίκευση, ενώ :is() συμβάλλει στην εξειδίκευση του πιο συγκεκριμένου επιχειρήματός του. Οφέλη του :has() περιλαμβάνουν στυλ με βάση τα συμφραζόμενα και καθαρότερη σήμανση. Τα μειονεκτήματα περιλαμβάνουν πιθανά προβλήματα απόδοσης εάν χρησιμοποιηθούν με απεριόριστους επιλογείς. Χρησιμοποιήστε περιορισμένο πεδίο εφαρμογής και συνδυάστε το με κλάσεις ή χαρακτηριστικά για προβλεψιμότητα.
Απαντήστε με παραδείγματα
/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }
/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }
/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }
4) Πού θα εφαρμόζατε τις προσαρμοσμένες ιδιότητες CSS για τη δημιουργία θεμάτων και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματά τους;
Οι προσαρμοσμένες ιδιότητες CSS μεταφέρουν τιμές μέσω της καταρράκτη, κληρονομούνται φυσικά και επιλύονται κατά τον χρόνο εκτέλεσης, γεγονός που τις καθιστά ιδανικές για θέματα, λειτουργίες πυκνότητας και διακριτικά σχεδίασης. Επιτρέπουν την εναλλαγή της σκοτεινής λειτουργίας ή της εναλλαγής.ping συστήματα χρωμάτων χωρίς ανακατασκευή περιουσιακών στοιχείων. Τα πλεονεκτήματα περιλαμβάνουν δυναμικές ενημερώσεις, συντοπισμό με στοιχεία και συμβατότητα με @layerΤα μειονεκτήματα περιλαμβάνουν την έμμεση χρήση για στατικούς αναλυτές και την ανάγκη σχεδιασμού εφεδρικών βάσεων. Χρησιμοποιήστε tokens με εύρος ρίζας για καθολική σημασιολογία και tokens με εύρος στοιχείων για παραλλαγές και διατηρήστε τα ονόματα σταθερά για να επιτρέψετε τη μακροπρόθεσμη συντηρησιμότητα.
Απαντήστε με παραδείγματα
:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
:root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }
5) Ποιο σύστημα διάταξης ταιριάζει σε ποιο πρόβλημα: Flexbox, Grid ή Subgrid;
Το Flexbox είναι ιδανικό για μονοδιάστατο ευθυγράμμιση και κατανομή κατά μήκος ενός μόνο άξονα, το Grid υπερέχει στο δισδιάστατο τοποθέτηση και σαφής track έλεγχος και το Υποπλέγμα επιτρέπει στα θυγατρικά στοιχεία να κληρονομούν το γονικό πλέγμα tracks για συνεπή ευθυγράμμιση μεταξύ των ένθετων στοιχείων. Η επιλογή του σωστού συστήματος μειώνει τις παρακάμψεις και βελτιώνει την αναγνωσιμότητα. Ένα κοινό μοτίβο είναι το Grid για τα πλαίσια σελίδας και τους πίνακες ελέγχου, το Flexbox για τις γραμμές εργαλείων και τις λίστες chip και το Subgrid για την ευθυγράμμιση εσωτερικών στοιχείων, όπως τα μεταδεδομένα καρτών, με τις εξωτερικές στήλες.
Τύποι και διαφορές μεταξύ (συγκριτικός πίνακας)
| Χρήση θήκης | Flexbox | Πλέγμα | Υποπλέγμα |
|---|---|---|---|
| Διάσταση | 1-D | 2-D | 2-D μέσω κληρονομικού tracks |
| Δύναμη | Κατανομή, ευθυγράμμιση | Σαφείς περιοχές, επαναλήψιμες tracks | Ευθυγράμμιση μεταξύ συνιστωσών |
| Ρύθμιση | Ελάχιστο | Ορισμός γραμμών/στηλών | Απαιτείται γονικό πλέγμα |
| Παράδειγμα | Γραμμές πλοήγησης, χάπια | Συλλογή, πίνακες ελέγχου | Υποσέλιδα καρτών ευθυγραμμισμένα με το πλέγμα σελίδας |
Απαντήστε με παραδείγματα
.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
6) Βελτιώνουν οι λογικές ιδιότητες τη διεθνοποίηση; Εξηγήστε τα οφέλη και τους συμβιβασμούς.
Οι λογικές ιδιότητες αντικαθιστούν τις φυσικές κατευθύνσεις όπως αριστερά και δεξιά με όρους σχετικούς με τη ροή, όπως η ενσωματωμένη αρχή ή το τέλος ενός μπλοκ. Αυτό κάνει ένα ενιαίο φύλλο στυλ να προσαρμόζεται σε γλώσσες γραφής από δεξιά προς τα αριστερά και σε κάθετες λειτουργίες γραφής χωρίς κανόνες διακλάδωσης. Τα οφέλη είναι η καλύτερη παγκοσμιοποίηση, η μειωμένη επανάληψη κανόνων και τα πιο ανθεκτικά στοιχεία. Τα μειονεκτήματα περιλαμβάνουν μια νοοτροπική αλλαγή κατά την υιοθέτηση και περιστασιακά κενά στις ιδιότητες μακράς ουράς. Προτίμηση margin-inline, padding-blockκαι inset-inline-start για την τοποθέτηση και την αποστασιοποίηση, ώστε να επιτυγχάνονται συνεπείς διατάξεις σε όλες τις τοποθεσίες.
Απαντήστε με παραδείγματα
.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }
7) Πότε θα το χρησιμοποιούσατε clamp() και σύγχρονες μονάδες προβολής ( svh, lvh, dvh ) για τον τύπο και την απόσταση ρευστού;
Χρήση clamp(min, preferred, max) όταν θέλετε τιμές που κλιμακώνονται ομαλά με την αύξηση του παραθύρου προβολής, αλλά ποτέ δεν υπερβαίνουν τα λογικά όρια. Αυτό είναι ιδανικό για τυπογραφία, συμπλήρωση και ενότητες ήρωα. Οι σύγχρονες μονάδες παραθύρου προβολής αντιμετωπίζουν το περιβάλλον χρήστη του προγράμματος περιήγησης για κινητά Chrome, παρέχοντας σταθερά ύψη για ενότητες πλήρους οθόνης. Τα οφέλη περιλαμβάνουν λιγότερα ερωτήματα πολυμέσων, σταθερό ρυθμό και βελτιωμένη προσβασιμότητα όταν συνδυάζονται με remΤο μειονέκτημα είναι η απαίτηση για δοκιμή σε όλες τις συσκευές για την επιβεβαίωση της οπτικής πρόθεσης και των ασφαλών στόχων πατήματος.
Απαντήστε με παραδείγματα
:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }
8) Τι είναι ένα περιβάλλον στοίβαξης και πώς το δημιουργούν ή το απομονώνουν ο δείκτης z και οι παράγοντες τοποθέτησης;
Ένα περιβάλλον στοίβαξης είναι ένα απομονωμένο πεδίο ζωγραφικής στο οποίο οι συγκρίσεις z-index γίνονται μόνο μεταξύ αδελφών εντός του ίδιου περιβάλλοντος. Νέα περιβάλλοντα προκύπτουν από το ριζικό στοιχείο, τα τοποθετημένα στοιχεία με z-index πλην autoκαι ορισμένες ιδιότητες όπως transform, opacity < 1, filterκαι position: fixedΗ κατανόησή τους εξηγεί συνηθισμένα προβλήματα τύπου «δεν λειτουργεί ο δείκτης z», όπου ένα παιδί δεν μπορεί να ξεπεράσει περιεχόμενο εκτός του πλαισίου του. Το όφελος είναι η ενθυλάκωση. Ο κίνδυνος είναι η τυχαία απομόνωση που αποτρέπει τις σκόπιμες επικαλύψεις.
Απαντήστε με παραδείγματα
.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }
9) Είναι η εγγενής ενσωμάτωση CSS έτοιμη για παραγωγή και πώς θα γίνει η μετεγκατάσταση από προεπεξεργαστές;
Η εγγενής ένθεση υποστηρίζεται ευρέως και μειώνει την επανάληψη με την συστέγαση σχέσεων κανόνων ενώ διατηρείτεping Οι επιλογείς είναι σύντομοι. Η μετεγκατάσταση θα πρέπει να δίνει προτεραιότητα στα στοιχεία, αντικαθιστώντας τις βαθιές αλυσίδες απογόνων με ένα ή δύο επίπεδα ένθεσης και αφαιρώντας δομές μόνο για προεπεξεργαστές, όπως τα mixins. Τα οφέλη περιλαμβάνουν μικρότερα bundles και βελτιωμένο χάρτη DevTools.ping; τα μειονεκτήματα περιλαμβάνουν τον πειρασμό της υπερβολικής τοποθέτησης φωλιών, η οποία αυξάνει την εξειδίκευση και εμποδίζει την επαναχρησιμοποίηση. Εγκαταστήστε προστατευτικά κιγκλιδώματα: περιορίστε το βάθος, διατηρήστε τα άγκιστρα με βάση την κλάση και συνδυάστε τα με @layer για τον έλεγχο της σειράς παράκαμψης.
Απαντήστε με παραδείγματα
.card {
display:grid; gap:.75rem;
& h3 { margin-block:.5rem; }
& .actions { display:flex; gap:.5rem; }
& .actions > button:hover { text-decoration:underline; }
}
10) Μπορείτε να χρησιμοποιήσετε ερωτήματα τύπου κοντέινερ και ποια είναι τα πρακτικά οφέλη τους;
Τα ερωτήματα στυλ επιτρέπουν στα στοιχεία να προσαρμόζονται σε υπολογισμένα στυλ του κοντέινερ τους, όπως ένα διακριτικό πυκνότητας ή μια παραλλαγή θέματος, χωρίς να χρειάζεται να περνούν επιπλέον ονόματα κλάσεων μέσω του DOM. Αυτό επιτρέπει στα συστήματα σχεδιασμού να εναλλάσσονται μεταξύ συμπαγών και άνετων λειτουργιών ή φωτεινών και σκούρων τόνων ανά κοντέινερ. Τα πλεονεκτήματα είναι τα αποσυνδεδεμένα στοιχεία και τα σαφέστερα όρια. Τα μειονεκτήματα περιλαμβάνουν την ανάγκη για προσεκτική ονομασία διακριτικών, τεκμηριωμένα εφεδρικά στοιχεία και σκόπιμη ρύθμιση κοντέινερ. Χρησιμοποιήστε τα για να εκφράσετε την κατάσταση ως δεδομένα και όχι ως εύθραυστους δομικούς επιλογείς.
Απαντήστε με παραδείγματα
/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }
/* Child adapts when the container declares compact density */
@container style(--density: compact) {
.item { padding:.5rem; gap:.5rem; }
}
11) Ποιοι παράγοντες απόδοσης έχουν σημασία για το CSS και πώς αποφεύγετε την αλλοίωση της διάταξης;
Η απόδοση του CSS εξαρτάται από το πόσο συχνά πρέπει να επανυπολογίζει το πρόγραμμα περιήγησης στυλ, υπολογισμός διάταξηκαι ξαναβάψτε ή σύνθετος επίπεδα. Η διαστρέβλωση διάταξης συμβαίνει όταν οι παρεμβαλλόμενες αναγνώσεις και εγγραφές σε ιδιότητες που επηρεάζουν τη διάταξη επιβάλλουν επαναλαμβανόμενες αναδιαμορφώσεις. Μια πειθαρχημένη προσέγγιση είναι η ελαχιστοποίηση της πολυπλοκότητας του επιλογέα, η διατήρηση χαμηλής εξειδίκευσης και η κίνηση μόνο ιδιοτήτων φιλικών προς τον συνθέτη. Το DOM σε παρτίδες διαβάζει πριν από τις εγγραφές και αξιοποιεί τον περιορισμό για τον περιορισμό της ακτίνας έκρηξης.
Απαντήστε με παραδείγματα
- Προτιμώ
transformκαιopacityγια κινούμενα σχέδια· αποφύγετε την κίνησηwidth/height/top/left. - Εγγραφές
content-visibility: autoσε τμήματα εκτός οθόνης και παρέχουνcontain-intrinsic-size. - Χρήση
will-changeμε φειδώ για την προώθηση επιπέδων μόνο για κινούμενα σχέδια μεγάλης διάρκειας. - Αντικαταστήστε τους deep degendary selectors με hooks μίας κλάσης για να μειώσετε τον επανυπολογισμό στυλ.
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }
12) Ποιες λειτουργίες CSS υποστηρίζουν την προσβασιμότητα αμέσως; Δώστε πλεονεκτήματα και παραδείγματα.
Το CSS δεν μπορεί να αντικαταστήσει το σημασιολογικό HTML ή το ARIA, αλλά βελτιώνεται. εστίαση ορατότητας, ασφάλεια κίνησηςκαι στρατηγικές αντίθεσης. ο :focus-visible Η ψευδοκλάση αποκαλύπτει την εστίαση όταν ανιχνεύεται η λειτουργία του πληκτρολογίου, αποτρέποντας τον οπτικό θόρυβο για τους χρήστες του ποντικιού, διατηρώντας παράλληλα τα σημάδια για τους χρήστες του πληκτρολογίου. Χαρακτηριστικά πολυμέσων όπως prefers-reduced-motion Επιτρέπουν αξιόπιστα εφεδρικά μοτίβα, ενώ ο προσεκτικός σχεδιασμός χρωματικών διακριτικών υποστηρίζει επαρκή αντίθεση. Το πλεονέκτημα είναι οι συμπεριληπτικές προεπιλογές σε ποικίλες προτιμήσεις χρηστών. Ο περιορισμός είναι ότι η σημασιολογία και η πλοήγηση με το πληκτρολόγιο πρέπει να παρέχονται μέσω σήμανσης και scripting.
Απαντήστε με παραδείγματα
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.parallax, .video-bg { animation: none; transition: none; }
}
13) Διαφορετικοί τρόποι συμπερίληψης CSS και τα πλεονεκτήματα ή μειονεκτήματα κάθε προσέγγισης.
Υπάρχουν πολλαπλές στρατηγικές συμπερίληψης, καθεμία με ξεχωριστά χαρακτηριστικά που επηρεάζουν την προσωρινή αποθήκευση, την κρίσιμη διαδρομή και τη συντηρησιμότητα. Τα εξωτερικά φύλλα στυλ διατηρούν τις ανησυχίες διαχωρισμένες και αξιοποιούν την προσωρινή αποθήκευση του προγράμματος περιήγησης. <style> είναι κατάλληλο για κρίσιμους κανόνες που πρέπει να φορτωθούν με την HTML· ενσωματωμένο style="" Τα χαρακτηριστικά έχουν ύψιστη προτεραιότητα, αλλά βλάπτουν την επαναχρησιμοποίηση και αυξάνουν την εξειδίκευση. Η επιλογή του σωστού τύπου μειώνει την επικάλυψη ωφέλιμου φορτίου, διατηρώντας παράλληλα την εργονομία του προγραμματιστή.
Πλεονεκτήματα έναντι μειονεκτημάτων (συγκριτικός πίνακας)
| Μέθοδος | Πλεονεκτήματα | Μειονεκτήματα | Τυπική χρήση |
|---|---|---|---|
| Εξωτερικό φύλλο στυλ | Αποθήκευση προσωρινής μνήμης προγράμματος περιήγησης· κοινόχρηστο σε όλες τις σελίδες | Επιπλέον αίτημα HTTP | Παγκόσμιο σύστημα σχεδιασμού |
Στη γραμμή <style> |
Εξαλείφει τα αιτήματα. Ιδανικό για κρίσιμα CSS. | Πιο δύσκολο να διαχειριστεί κανείς σε μεγάλη κλίμακα | Στυλ στο επάνω μέρος |
Στη γραμμή style="" |
Άμεση και υψηλότερη εξειδίκευση | Δεν επιτρέπεται η επαναχρησιμοποίηση· θορυβώδης HTML | Μοναδικές παρακάμψεις |
Απαντήστε με παραδείγματα
<link rel="stylesheet" href="/el/assets/app.css" /> <style>/* minimal critical rules for LCP elements */</style> <div class="btn" style="--danger: #b00020">Delete</div>
14) Ποια είναι η διαφορά μεταξύ relative, absolute, fixedκαι sticky τοποθέτηση; Παρέχετε καθοδήγηση σχετικά με την περίπτωση χρήσης.
Η τοποθέτηση καθορίζει τον τρόπο με τον οποίο τοποθετούνται τα στοιχεία στη ροή και τον τρόπο με τον οποίο αλληλεπιδρούν με την κύλιση και τους προγονικούς κώδικες. relative διατηρεί τη φυσική ροή αλλά αντισταθμίζει το οπτικό πλαίσιο· χρησιμοποιείται συχνά για να δημιουργήσει ένα πλαίσιο αγκύρωσης. absolute αφαιρεί ένα στοιχείο από τη ροή, τοποθετώντας το σε σχέση με τον πλησιέστερο τοποθετημένο πρόγονο, γεγονός που παρέχει ακρίβεια με κόστος την απόκριση. fixed καρφιτσώνει στοιχεία στο παράθυρο προβολής, το οποίο είναι ιδανικό για μόνιμες γραμμές, αλλά πρέπει να λαμβάνει υπόψη τα πληκτρολόγια οθόνης και τις ασφαλείς περιοχές. sticky Εναλλάσσει μεταξύ στατικής και σταθερής ρύθμισης ανάλογα με τα όρια κύλισης, παρέχοντας κεφαλίδες ενοτήτων και ευρετήρια εντός σελίδας.
Απαντήστε με παραδείγματα
.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }
15) Ποιοι παράγοντες διαμορφώνουν μια διατηρήσιμη αρχιτεκτονική CSS (BEM, ITCSS, βοηθητικά προγράμματα, επίπεδα) και ποιος είναι ο κύκλος ζωής ενός στυλ στοιχείων;
Μια διατηρήσιμη αρχιτεκτονική ισορροπεί πειθαρχία εξειδίκευσης, προβλέψιμος επίστρωση, και σταθερό ονοματοδοσίαΤο BEM παρέχει σαφή hooks, το ITCSS διατάζει κανόνες από επαναφορές χαμηλού επιπέδου σε βοηθητικά προγράμματα υψηλού επιπέδου, οι προσεγγίσεις που δίνουν προτεραιότητα στο βοηθητικό πρόγραμμα επιταχύνουν την επανάληψη με περιορισμένα πρωτόγονα και @layer Τυποποιεί τη σειρά παράκαμψης σε όλη τη βάση κώδικα. Ένας κύκλος ζωής ενός στοιχείου συνήθως ξεκινά με τον ορισμό διακριτικών, προχωρά στη βάση και στους κανόνες των στοιχείων, προσθέτει παραλλαγές και καταστάσεις και τελειώνει με πολιτικές κατάργησης που αποφεύγουν την παραβίαση αλλαγών. Το πλεονέκτημα είναι η συνεπής συμπεριφορά μεταξύ των ομάδων. Το συμβιβασμός είναι ο εκ των προτέρων σχεδιασμός και η διακυβέρνηση.
Απαντήστε με παραδείγματα
- Tokens in
:root(απόσταση, χρώμα, ακτίνα). - Εξαρτήματα που τοποθετούνται σε
@layer componentsμε επιλογείς μίας κατηγορίας. - Παραλλαγές μέσω χαρακτηριστικών δεδομένων ή ερωτημάτων στυλ κοντέινερ για λόγους σαφήνειας.
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }
16) Πώς επηρεάζει το Shadow DOM το CSS sco;ping, και ποιοι είναι οι διαφορετικοί τρόποι για να διαμορφώσετε τα εξαρτήματα;
Το Shadow DOM ενσωματώνει τη σήμανση και το στυλ, αποτρέποντας τυχαία διαρροή και διασφαλίζοντας τη σταθερότητα των εξαρτημάτων. Οι δημιουργοί μπορούν να εκθέσουν επιφάνειες σκόπιμα: ::part() στοχεύει σε επώνυμα μέρη που εξάγονται από το στοιχείο, ενώ ::slotted() στυλ που έχουν αντιστοιχιστεί σε κόμβους light-DOM σε υποδοχές. Τα πλεονεκτήματα περιλαμβάνουν ισχυρή ενθυλάκωση και προβλέψιμες επιφάνειες θεματοποίησης. Τα μειονεκτήματα περιλαμβάνουν περιορισμένη εμβέλεια σε εσωτερικά στοιχεία, εκτός εάν ο σχεδιαστής εξαρτημάτων παρέχει εξαρτήματα, καθώς και την ανάγκη τεκμηρίωσης αυτών των εξαρτημάτων για τους καταναλωτές.
Απαντήστε με παραδείγματα
/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }
17) Ποια είναι τα χαρακτηριστικά του μοντέλου πλαισίου CSS και γιατί; box-sizing: border-box ύλη;
Το μοντέλο κουτιού περιγράφει πώς προκύπτει το συνολικό μέγεθος ενός στοιχείου από περιεχόμενο, συμπλήρωση, περίγραμμακαι περιθώριοΜε την προεπιλογή content-box, δηλωμένο width εξαιρούνται τα περιθώρια και τα περιγράμματα, τα οποία μπορούν να προκαλέσουν εκπλήξεις υπερχείλισης και πολύπλοκους υπολογισμούς. Υιοθέτηση border-box Περιλαμβάνει συμπλήρωση και περίγραμμα εντός του δηλωμένου πλάτους και ύψους, καθιστώντας τα μαθηματικά πλέγματος και το μέγεθος των στοιχείων πιο προβλέψιμα. Το πλεονέκτημα είναι τα απλούστερα νοητικά μοντέλα και τα λιγότερα σφάλματα διάταξης. Το μειονέκτημα είναι ότι η ανάμειξη μοντέλων μέσα σε ένα σύστημα μπορεί να προκαλέσει σύγχυση στους συντελεστές. Τυποποιήστε στη ρίζα και καταγράψτε τις εξαιρέσεις ανοιχτά.
Απαντήστε με παραδείγματα
*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }
18) Πού θα το χρησιμοποιούσατε @supports για προοδευτική βελτίωση και ποια είναι τα οφέλη;
@supports επιτρέπει την ανίχνευση χαρακτηριστικών στο CSS, επιτρέποντας σε μια γραμμή βάσης να λειτουργεί παντού με βελτιώσεις υπό όρους όπου είναι διαθέσιμες. Αυτό το μοτίβο μειώνει τον κίνδυνο κατά την υιοθέτηση σύγχρονων χαρακτηριστικών όπως ερωτήματα κοντέινερ, :has()ή υποπλέγμα. Τα κύρια οφέλη είναι η ομαλή υποβάθμιση και οι πιο ξεκάθαρες διαδρομές μετεγκατάστασης. Τα μειονεκτήματα περιλαμβάνουν τη διατήρηση διπλών διαδρομών κώδικα για ένα χρονικό διάστημα. Δομήστε πρώτα τη βασική συμπεριφορά και, στη συνέχεια, τυλίξτε την προηγμένη συμπεριφορά σε στοχευμένες @supports μπλοκ έτσι ώστε τα παλαιότερα περιβάλλοντα να μην υποχωρούν.
Απαντήστε με παραδείγματα
.card { display: block; }
@supports (display: grid) {
.card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}
19) Ποιες μονάδες CSS πρέπει να επιλέξετε και ποια είναι η διαφορά μεταξύ τους;
Η επιλογή μονάδας επηρεάζει την κλιμάκωση, την αναγνωσιμότητα και την προσβασιμότητα. rem προσαρμόζεται στο μέγεθος της ρίζας της γραμματοσειράς, καθιστώντας το ιδανικό για καθολικό τύπο και απόσταση. em κλιμακώνεται με το τρέχον στοιχείο, το οποίο είναι χρήσιμο μέσα σε στοιχεία αλλά μπορεί να συντεθεί απροσδόκητα. ch αντικατοπτρίζει το πλάτος του συμβόλου "0" και είναι εξαιρετικό για τη μέτρηση (μήκος γραμμής). px είναι η συσκευή ευθυγραμμισμένη με τα pixel και ασφαλής για γραμμές τριχών, αλλά δεν ανταποκρίνεται στις προτιμήσεις του χρήστη. Μονάδες ύψους γραμμής όπως lh και rlh βοηθούν στη διατήρηση του κάθετου ρυθμού συνδέοντας την απόσταση με το τυπογραφικό πλέγμα.
Απαντήστε με παραδείγματα
- Χρήση
max-width: 65chγια ευανάγνωστες παραγράφους. - Ορισμός καθολικού διαστήματος ως πολλαπλάσια του
remνα σέβονται τις προτιμήσεις των χρηστών. - Χρήση
emγια εσωτερικά στοιχεία, όπως κουμπιά εικονιδίων που προσαρμόζονται στο μέγεθος της γραμματοσειράς.
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }
20) Βοηθούν οι μετρητές CSS με το δομημένο περιεχόμενο και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματά τους;
Οι μετρητές CSS παρέχουν αυτόματη αρίθμηση χωρίς να αλλοιώνουν τη σημασιολογική HTML, η οποία είναι πολύτιμη για επικεφαλίδες, σχήματα και νομικά έγγραφα. Τα οφέλη περιλαμβάνουν καθαρή σήμανση και ευελιξία στην παρουσίαση σε διάφορες τοπικές ρυθμίσεις ή ενότητες. Τα μειονεκτήματα είναι πιθανά κενά προσβασιμότητας εάν η αρίθμηση μεταφέρει ουσιαστικό νόημα που δεν αντικατοπτρίζεται στη δομή DOM ή δεν ανακοινώνεται από την υποστηρικτική τεχνολογία. Χρησιμοποιήστε μετρητές για την αρίθμηση παρουσίασης, διασφαλίζοντας παράλληλα ότι η υποκείμενη ιεραρχία είναι σωστή και εύκολη στην πλοήγηση.
Απαντήστε με παραδείγματα
article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }
21) Πότε πρέπει να δημιουργείτε κινούμενα σχέδια με CSS και ποιες ιδιότητες είναι οι ασφαλέστερες για την απόδοση;
Οι κινούμενες εικόνες είναι πιο ανθεκτικές όταν λειτουργούν σε ιδιότητες φιλικές προς τον συνθέτη που αποφεύγουν την αναμετάδοση και την επαναβαφή. Το CSS υπερέχει σε δηλωτικές, καθοδηγούμενες από την κατάσταση μεταβάσεις όπου το πρόγραμμα περιήγησης μπορεί να βελτιστοποιήσει τον προγραμματισμό καρέ. Οι ασφαλέστερες επιλογές είναι transform και opacity, τα οποία συνήθως εκτελούνται στο νήμα σύνθεσης και ελαχιστοποιούν την εργασία στο κύριο νήμα. Χρησιμοποιήστε CSS για μικροαλληλεπιδράσεις, μεταβάσεις κατά την τοποθέτηση του δείκτη του ποντικιού και απλά εφέ εισόδου. Αποφύγετε την κίνηση ιδιοτήτων που επηρεάζουν τη διάταξη, όπως width, height, topκαι left επειδή ενεργοποιούν τον επανυπολογισμό της διάταξης. Όταν οι αλλαγές στη γεωμετρία είναι απαραίτητες, σκεφτείτε τις ψευδαισθήσεις που βασίζονται σε μετασχηματισμούς ή τη δημιουργία απαλών ζευγαριών. max-height μεταβάσεις με διαχείριση υπερχείλισης και προσεκτικά εφεδρικά κουμπιά προσβασιμότητας.
Απαντήστε με παραδείγματα
.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
transform: translateY(0);
opacity: 1;
transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.dialog { transition: none; }
}
22) Μπορεί το CSS να βοηθήσει τις εικόνες που ανταποκρίνονται στις ανάγκες σας και ποιοι είναι οι διαφορετικοί τρόποι προσέγγισης;
Η HTML κατέχει την εγγενή επιλογή εικόνας μέσω srcset και sizes, αλλά το CSS παραμένει σημαντικό για διακοσμητικές εικόνες, καλλιτεχνική διεύθυνση φόντων και προσαρμογή αντικειμένων. Χρησιμοποιήστε το. image-set() να παρέχει πολλαπλές αναλύσεις για εικόνες φόντου και να προτιμά object-fit και object-position για τον έλεγχο των αντικατασταθέντων στοιχείων μέσα στα πλαίσια τους. Συνδυάστε τα με ερωτήματα κοντέινερ ή μέσων για να προσαρμόσετε τις καλλιέργειες, την πυκνότητα ή τα σημεία εστίασης. Το πλεονέκτημα είναι ο ακριβής οπτικός έλεγχος χωρίς πολλαπλασιασμό της σήμανσης. Το μειονέκτημα είναι ότι οι εικόνες φόντου CSS δεν διαθέτουν εγγενή διαπραγμάτευση μεγέθους και δεν ανακοινώνονται από υποστηρικτικές τεχνολογίες, επομένως οι εικόνες περιεχομένου θα πρέπει να παραμένουν σε HTML.
Πλεονεκτήματα έναντι μειονεκτημάτων (συγκριτικός πίνακας)
| Προσέγγιση | Χαρακτηριστικά: | Πλεονεκτήματα | Μειονεκτήματα | Τυπική χρήση |
|---|---|---|---|---|
HTML srcset/sizes |
Εγγενής επιλογή | Σωστή σημασιολογία· βέλτιστη απόδοση | Απαιτούνται αλλαγές σήμανσης | Εικόνες περιεχομένου |
CSS image-set() |
Σύνολα ανάλυσης φόντου | Εύκολη εναλλαγή ανά σημείο διακοπής | Χωρίς εγγενή διαστασιολόγηση | Διακοσμητικά φόντα |
object-fit / position |
Box έλεγχος περιορισμού | Συνεπής καλλιέργειαping | Όχι για εικόνες φόντου | Μικρογραφίες, avatar |
Απαντήστε με παραδείγματα
.hero {
background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }
23) Είναι ένα JavaΕφικτή η σκοτεινή λειτουργία χωρίς script και ποιοι παράγοντες την καθιστούν ανθεκτική;
A JavaΗ σκοτεινή λειτουργία χωρίς script είναι εφικτή συνδυάζοντας προσαρμοσμένες ιδιότητες με το prefers-color-scheme λειτουργία πολυμέσων και ένα προαιρετικό χαρακτηριστικό HTML για παρακάμψεις χρηστών. Ορίστε σημασιολογικά διακριτικά στη ρίζα, παρέχετε σκοτεινές παραλλαγές μέσα σε ένα ερώτημα πολυμέσων και επιτρέψτε ένα [data-theme] παράκαμψη για σεβασμό της ρητής επιλογής του χρήστη ή της εταιρικής επωνυμίας. Αυτή η προσέγγιση ελαχιστοποιεί την πολυπλοκότητα, μειώνει το τρεμόπαιγμα και διατηρεί την αυθεντικότητα της καταρράκτη. Ο περιορισμός είναι η εξάρτηση από τις προτιμήσεις του συστήματος όταν δεν υπάρχει ρητή παράκαμψη. Καταγράψτε τα διακριτικά, διασφαλίστε επαρκή αντίθεση και δοκιμάστε τα περιγράμματα και τις καταστάσεις της εστίασης και στις δύο λειτουργίες.
Απαντήστε με παραδείγματα
:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
24) Υπάρχουν μειονεκτήματα στην βαθιά φωλιασμένη επιλογή και στην υψηλή ειδικότητα, και ποια οφέλη προκύπτουν από μια προσέγγιση χαμηλής ειδικότητας;
Η βαθιά φωλιασμένη δομή και η υψηλή εξειδίκευση καθιστούν τα στυλ εύθραυστα, αργές αναδιαμορφώσεις και αυξάνουν τον κίνδυνο ακούσιων παρακάμψεων. Τέτοιοι επιλογείς συνδέουν στενά το CSS με τη δομή του εγγράφου, γεγονός που διογκώνει το κόστος συντήρησης όταν εξελίσσεται η σήμανση. Μια προσέγγιση χαμηλής εξειδίκευσης ευνοεί τα hooks μίας κλάσης, την επίπεδη αρχιτεκτονική και @layer Παραγγελία για προβλέψιμη διαχείριση των παρακάμψεων. Τα οφέλη περιλαμβάνουν σαφέστερη ιδιοκτησία, ταχύτερη απόδοση λόγω απλούστερης αντιστοίχισης και ευκολότερη σύνθεση μεταξύ των ομάδων. Καθορισμός ορίων στο βάθος ένθεσης, αποφυγή χαρακτηρισμού κλάσεων με ονόματα στοιχείων όταν δεν είναι απαραίτητες και παροχή βοηθητικών προγραμμάτων για καταπακτώσεις διαφυγής.
Απαντήστε με παραδείγματα
/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }
/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }
25) Ποια μεθοδολογία—BEM, ITCSS ή utility-first—ταιριάζει σε διαφορετικές ομάδες και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα;
Η επιλογή μεθοδολογίας εξαρτάται από το μέγεθος της ομάδας, την κουλτούρα αξιολόγησης και την αστάθεια του προϊόντος. ΚΑΛΑ παρέχει σαφή, ευανάγνωστα hooks που κλιμακώνονται σε μεγάλες ομάδες. ITCSS Οργανώνει τη βάση κώδικα από επαναφορές χαμηλού επιπέδου μέσω αντικειμένων και στοιχείων έως βοηθητικά προγράμματα, ευθυγραμμιζόμενη με την καταρράκτη. Προτεραιότητα στις υπηρεσίες κοινής ωφέλειας Επιταχύνει την παράδοση με περιορισμένα πρωτόγονα και ευνοεί τη σύνθεση έναντι των προσαρμοσμένων επιλογέων. Τα υβριδικά είναι συνηθισμένα: ITCSS για παραγγελία, BEM για ονομασία όπου χρειάζεται και βοηθητικά προγράμματα για εφάπαξ προσαρμογές. Οι συμβιβασμοί περιλαμβάνουν την αναλυτικότητα (BEM), τον εκ των προτέρων σχεδιασμό (ITCSS) και τον πιθανό πολλαπλασιασμό κλάσεων (με προτεραιότητα τη χρησιμότητα).
Διαφορές (συγκριτικός πίνακας)
| Μέθοδος | Χαρακτηριστικά: | Πλεονεκτήματα | Μειονεκτήματα | Καλύτερα Fit |
|---|---|---|---|---|
| ΚΑΛΑ | .block__elem–ονομασία mod | Προβλέψιμα άγκιστρα | Λεπτομερείς επιλογείς | Μεγάλες ομάδες, συστήματα σχεδιασμού |
| ITCSS | Πολυεπίπεδη αρχιτεκτονική | Εκκαθάριση σειράς παράκαμψης | Γενικά έξοδα σχεδιασμού | Μονοαποθήκες πολλαπλών ομάδων |
| Προτεραιότητα στις υπηρεσίες κοινής ωφέλειας | Atomμαθήματα IC | Ταχύτητα, συνέπεια | Κίνδυνος απώλειας τάξης | Γρήγορο πρωτότυποping, εφαρμογές |
26) Εξηγήστε τον κύκλο ζωής των διακριτικών χώρου και τυπογραφίας από το σχεδιασμό έως τον κώδικα με παραδείγματα.
Ο κύκλος ζωής των διακριτικών ξεκινά στο σχεδιασμό με επιλογές κλίμακας, αναλογίες και στόχους προσβασιμότητας. Αυτά γίνονται ονομασμένες, εκδομένες προσαρμοσμένες ιδιότητες που αντιπροσωπεύουν σημασιολογικές τύποι (για παράδειγμα, --space-2, --font-scale-1 ) αντί για ακατέργαστες τιμές. Τα διακριτικά ρέουν σε βασικά στυλ, στη συνέχεια σε στοιχεία και παραλλαγές και τελικά καταργούνται ή ανακατευθύνονται μέσω ψευδωνύμων καθώς τα συστήματα εξελίσσονται. Τα οφέλη περιλαμβάνουν συνεπή ρυθμό, μικρότερες διαφορές και βελτιωμένη ισοτιμία μεταξύ πλατφορμών. Τα μειονεκτήματα περιλαμβάνουν την αρχική επιβάρυνση διακυβέρνησης και την ανάγκη για σαφή τεκμηρίωση. Αντιμετωπίστε τα διακριτικά ως δημόσια API: ορίστε εύρη, αντιστοιχίστε τα με οδηγίες χρήσης και παρέχετε σημειώσεις μετεγκατάστασης.
Απαντήστε με παραδείγματα
:root{
--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }
/* deprecation alias */
:root{ --space-small: var(--space-2); }
27) Πώς :focus-visible, :focus-withinκαι :target διαφέρουν, και ποια πλεονεκτήματα προσφέρει το καθένα;
Αυτοί οι επιλογείς αντιμετωπίζουν ξεχωριστά χαρακτηριστικά αλληλεπίδρασης και πλοήγησης. :focus-visible εμφανίζει την εστίαση μόνο όταν η λειτουργία εισαγωγής υποδηλώνει πλοήγηση μέσω πληκτρολογίου, μειώνοντας τηνtracδακτύλιοι ting για χρήστες ποντικιού, ενώ παράλληλα υποστηρίζουν την προσβασιμότητα. :focus-within ταιριάζει με ένα κοντέινερ όταν οποιοδήποτε απόγονος έχει εστίαση, επιτρέποντας την ομαδοποιημένη επισήμανση για σύνθετα στοιχεία όπως πεδία φόρμας. :target ταιριάζει με το στοιχείο που αναφέρεται από το URL fragment, ενισχύοντας την παράλειψη συνδέσμων και την πλοήγηση εντός σελίδας χωρίς σενάρια. Συνδυασμένα προσεκτικά, βελτιώνουν τον προσανατολισμό, μειώνουν το γνωστικό φορτίο και υποστηρίζουν αποτελεσματικές ροές εργασίας πληκτρολογίου.
Απαντήστε με παραδείγματα
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }
28) Ποια είναι τα οφέλη και τα μειονεκτήματα του content-visibility και περιορισμός CSS σε μεγάλα έγγραφα;
content-visibility: auto αναβάλλει την εργασία απόδοσης για στοιχεία εκτός οθόνης μέχρι να βρεθούν κοντά στο παράθυρο προβολής, μειώνοντας δραματικά το αρχικό κόστος απόδοσης σε μεγάλες ροές δεδομένων. Πρόσθετος περιορισμός ( contain: layout paint style ) περιορίζει την επίδραση ενός υποδένδρου στην υπόλοιπη σελίδα, συρρικνώνοντας το εύρος της αναδιαμόρφωσης και επιταχύνοντας τις επαναλαμβανόμενες ενημερώσεις. Τα οφέλη είναι η βελτιωμένη απόκριση και η μειωμένη χρήση μνήμης. Τα μειονεκτήματα περιλαμβάνουν πιθανά φαινόμενα pop-in εάν τα εγγενή μεγέθη είναι άγνωστα και η πολυπλοκότητα όταν JavaΤο σενάριο πρέπει να μετρά μεγέθη. Μετριάστε παρέχοντας contain-intrinsic-size και μετρήσεις μόνο όταν είναι απαραίτητο.
Απαντήστε με παραδείγματα
.feed-item{
content-visibility: auto;
contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
contain: layout paint style;
}
29) Πώς δημιουργείτε ένα πλέγμα που προσαρμόζεται στις ανάγκες σας με ελάχιστα σημεία διακοπής χρησιμοποιώντας minmax() και auto-fit/auto-fill?
Μια ανθεκτική διάταξη μπορεί να επιτευχθεί ορίζοντας ευέλικτη tracks που επεκτείνονται μέχρι ένα μέγιστο πλάτος και στη συνέχεια τυλίγονται αυτόματα. repeat(auto-fit, minmax(min, 1fr)) δημιουργεί όσες στήλες χωράνε, συμπτύσσοντας κενές tracks για την αποφυγή αδέξι κενών. Αυτό μειώνει την εξάρτηση από σαφή σημεία διακοπής, διατηρώντας παράλληλα αρμονική πυκνότητα σε όλα τα μεγέθη οθόνης. Η προσέγγιση είναι ιδανική για συλλογές, κάρτες και λίστες προϊόντων. Παρέχετε άνετα ελάχιστα όρια (για παράδειγμα, 16rem ) και βασίζονται στην απόσταση μεταξύ των κενών για τη διατήρηση του ρυθμού.
Απαντήστε με παραδείγματα
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
30) Ποιοι παράγοντες καθορίζουν πότε να επιλέξετε gap έναντι περιθωρίων για την απόσταση μεταξύ των στοιχείων;
gap είναι μια διάταξη απόστασης με επίγνωση ροής που λειτουργεί εγγενώς με Flexbox και Grid, εφαρμόζοντας συμμετρικό διαχωρισμό χωρίς περιθώρια που καταρρέουν στις άκρες. Είναι ιδανική για εντός συστατικού απόσταση επειδή δεν επηρεάζει την στοίχιση πρώτου/τελευταίου θυγατρικού στοιχείου ούτε απαιτεί κατευθυντικές αλλαγές σε διατάξεις από δεξιά προς τα αριστερά. Τα περιθώρια είναι προτιμότερα για εξωτερικός απόσταση που αποτελεί μέρος του δημόσιου API ενός στοιχείου ή όταν η απόσταση πρέπει να αλληλεπιδρά με περιβάλλοντα που δεν είναι Flex/Grid. Επιλέξτε με βάση το πεδίο εφαρμογής, την ιδιοκτησία και τη σημασιολογία διάταξης για να αποφύγετε απροσδόκητες επικαλύψεις και να διατηρήσετε τους κανόνες παράκαμψης στο ελάχιστο.
Διαφορές (συγκριτικός πίνακας)
| Κριτήριο | gap |
περιθώρια |
|---|---|---|
| Scope | Εσωτερικό στο κοντέινερ διάταξης | Εξωτερικά μεταξύ αδελφών και γειτόνων |
| κατευθυντικότητα | Λογικό και συμμετρικό | Μπορεί να απαιτηθούν προσαρμογές από την αριστερή πλευρά στην κατεύθυνση αριστεράς γραμμής (RTL) |
| Συμπεριφορά κατάρρευσης | δεν ισχύει | Υπόκειται σε κατάρρευση περιθωρίου |
| καλυτερα use | Ευέλικτη/Πλέγμα θυγατρικής απόστασης | Εξωτερική απόσταση εξαρτημάτων και διαμόρφωση διάταξηςtracts |
Απαντήστε με παραδείγματα
.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */
31) Ποια μειονεκτήματα συνεπάγεται η εξάρτηση από !important, και ποιες είναι οι ασφαλέστερες εναλλακτικές λύσεις;
Υπερβολική χρήση !important παρακάμπτει τον φυσικό κύκλο ζωής της καταρράκτη, η οποία αποκρύπτει την πρόθεση, μπλοκάρει τις νόμιμες παρακάμψεις και αναγκάζει τους μελλοντικούς συνεισφέροντες να κλιμακώσουν ακόμη περισσότερο την εξειδίκευση. Υπονομεύει επίσης τη δυνατότητα δοκιμής επειδή οι κανόνες καθίστανται άτρωτοι στην τάξη και @layer στρατηγικές. Η επαγγελματική εναλλακτική λύση είναι ο σχεδιασμός προβλέψιμων διαδρομών παράκαμψης: μείωση της εξειδίκευσης του επιλογέα, τοποθέτηση πολιτικών σε ένα ειδικό επίπεδο βοηθητικών προγραμμάτων ή αναδιάταξη πηγών με @layer αντί να οπλοποιούμε τις δηλώσεις. Επιφυλάσσομαι !important για σκόπιμες περιπτώσεις που καθοδηγούνται από τον χρήστη, όπως βοηθητικά προγράμματα υψηλής αντίθεσης ή αναγκαστικής ορατότητας που λειτουργούν ως τεκμηριωμένη καταπακτή διαφυγής.
Απαντήστε με παραδείγματα
/* Deliberate, documented utility only */
@layer utilities {
.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}
/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }
32) Ποιοι τύποι επιλογέων πρέπει να αποφεύγονται για λόγους απόδοσης ή συντηρησιμότητας και γιατί;
Οι επιλογείς που συνδέονται στενά με το βάθος ή τα χαρακτηριστικά του εγγράφου σε ολόκληρο το DOM είναι επικίνδυνοι. Οι μεγάλες αλυσίδες απογόνων αυξάνουν το κόστος αντιστοίχισης και δημιουργούν εύθραυστες εξαρτήσεις από τη σήμανση. Οι ευρείς επιλογείς χαρακτηριστικών, όπως [class*="btn"] or [data-*] χωρίς σκόping μπορεί να σαρώσει μεγάλα υποδέντρα. Υπερβολικά εξειδικευμένοι επιλογείς όπως ul.nav > li > a.link μειώνουν την επαναχρησιμοποίηση και περιπλέκουν τις παρακάμψεις. Μια συντηρήσιμη προσέγγιση προτιμά άγκιστρα μίας κλάσης, χαρακτηριστικά κατάστασης με σαφή έννοιαtracts (για παράδειγμα, [data-state="open"] ), και σύντομες σχέσεις ( > , + ) εντός των ορίων των στοιχείων. Αυτό βελτιώνει την αναγνωσιμότητα, μειώνει τις διαδοχικές διενέξεις και επιταχύνει τις αναδιαμορφώσεις.
Απαντήστε με παραδείγματα
/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }
/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }
33) Πότε πρέπει να επιλέξετε @layer βοηθητικά προγράμματα έναντι παραλλαγών στοιχείων και ποια είναι τα οφέλη;
Εξπρές υπηρεσιών κοινής ωφέλειας εφάπαξ προσαρμογές όπως η απόσταση, η εμφάνιση ή η στοίχιση που θα πρέπει να παρακάμπτονται χωρίς να αυξάνεται η εξειδίκευση. Οι παραλλαγές στοιχείων εκφράζουν επαναλήψιμες καταστάσεις ή τρόποι λειτουργίας που ανήκουν στο API των στοιχείων. Τα βοηθητικά προγράμματα υπερέχουν κατά τη σύνθεση στον κώδικα εφαρμογής επειδή είναι προβλέψιμα και δεν απαιτούν επεξεργασία του φύλλου στυλ του στοιχείου. Οι παραλλαγές είναι ανώτερες όταν επαναλαμβάνεται η ίδια κατάσταση και πρέπει να τεκμηριώνονται και να δοκιμάζονται ως μέρος του συστήματος σχεδιασμού. Μια ισορροπημένη αρχιτεκτονική τοποθετεί τα βοηθητικά προγράμματα αργά στη σειρά των επιπέδων και διατηρεί τις παραλλαγές των στοιχείων χαμηλής εξειδίκευσης εντός του επιπέδου των στοιχείων.
Απαντήστε με παραδείγματα
@layer reset, base, components, utilities;
/* Variant: part of the API */
@layer components {
.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}
/* Utility: composition escape hatch */
@layer utilities {
.mt-4 { margin-block-start: 1rem; }
.inline { display:inline; }
}
34) Μπορεί το Grid να αντικαταστήσει όλη τη χρήση του Flexbox ή υπάρχουν λόγοι που οφείλονται στη διαφορά για να διατηρηθούν και τα δύο;
Το Grid και το Flexbox λύνουν ορθογώνια προβλήματα. Το Grid παρέχει δισδιάστατο έλεγχο με σαφή track ορισμούς, καθιστώντας τα σύνθετα πλαίσια σελίδων, τους πίνακες ελέγχου και τις συλλογές καρτών απλά. Το Flexbox υπερέχει στην κατανομή σε έναν άξονα, στο εγγενές μέγεθος κατά μήκος του κύριου άξονα και στην ευθυγράμμιση εντός γραμμών ή στηλών, κάτι που είναι ιδανικό για γραμμές εργαλείων, μενού και τσιπ. Η προσπάθεια επιβολής του Πλέγματος παντού θυσιάζει την εργονομική συμπεριφορά ευθυγράμμισης, ενώ η επιβολή του Flexbox για διάταξη μακροεντολών εισάγει εύθραυστα περιτυλίγματα. Τα ώριμα συστήματα συνδυάζουν σκόπιμα και τα δύο, μερικές φορές μέσα στο ίδιο στοιχείο, επιλέγοντας τη μηχανή της οποίας τα χαρακτηριστικά ταιριάζουν με το πρόβλημα.
Διαφορές (συγκριτικός πίνακας)
| Κριτήριο | Πλέγμα | Flexbox |
|---|---|---|
| Διάσταση | Δισδιάστατη tracks | Μονοδιάστατη ροή |
| Δύναμη | Σαφείς περιοχές, κενά, υποπλέγμα | Διανομή, ευθυγράμμιση, αναδιάταξη |
| Χρήση καλυτέρας | Πλαίσια σελίδας, πίνακες ελέγχου | Γραμμές εργαλείων, πλοήγηση, λίστες τσιπ |
Απαντήστε με παραδείγματα
.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }
35) Ποια είναι τα οφέλη και τα μειονεκτήματα της χρήσης aspect-ratio έναντι των πλαστικών κόμπων;
aspect-ratio Προσφέρει έναν δηλωτικό, αυτο-τεκμηριωτικό τρόπο διατήρησης σχημάτων για κάρτες, μέσα και μικρογραφίες χωρίς στοιχεία περιτύλιξης ή ψευδο-στοιχειακά hacks. Ενσωματώνεται άψογα με την προσαρμογή αντικειμένων και λειτουργεί προβλέψιμα σε διατάξεις Grid και Flex. Τα κύρια μειονεκτήματα είναι τα κενά του παλαιού προγράμματος περιήγησης σε παλαιότερα περιβάλλοντα και η ανάγκη επανεξέτασης του προηγούμενου CSS που βασίζεται σε hacks. Τα hacks συμπλήρωσης παραμένουν εφεδρικά για πολύ παλιούς κινητήρες, αλλά αυξάνουν την πολυπλοκότητα του DOM και μειώνουν τη σαφήνεια. Προτιμάται aspect-ratio για συντηρησιμότητα και φράξτε το με @supports μόνο εάν η κάλυψη παλαιού τύπου είναι ασύμβατηtracαπαιτείται κανονικά.
Απαντήστε με παραδείγματα
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
.thumb-wrap { position: relative; }
.thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
.thumb { position:absolute; inset:0; }
}
36) Πώς θα δημιουργούσατε μια ανθεκτική αυτοκόλλητη κεφαλίδα που σέβεται τις ασφαλείς περιοχές και τα παράθυρα προβολής για κινητά;
Μια ανθεκτική κεφαλίδα ισορροπεί position: sticky για αγκύρια σε επίπεδο διατομής με position: fixed μόνο όταν ο σχεδιασμός απαιτεί καθολική διατήρηση. Τα ένθετα ασφαλούς περιοχής αποτρέπουν την επικάλυψη με το περιβάλλον χρήστη του συστήματος σε συσκευές με εγκοπές και σύγχρονες μονάδες προβολής όπως dvh αποφύγετε την κατάρρευση όταν το πρόγραμμα περιήγησης Chrome εμφανίζεται ή αποκρύπτεται. Η στρατηγική περιλαμβάνει την ανάθεση ενός σαφούς περιβάλλοντος στοίβαξης, την κράτηση χώρου για την αποτροπή αλλαγών διάταξης και την παροχή προτιμήσεων κίνησης για εφέ εισόδου. Η δοκιμή σε όλα τα πληκτρολόγια και σε οριζόντιο προσανατολισμό είναι κρίσιμη, καθώς τα εικονικά πληκτρολόγια μπορούν να αποκρύψουν σταθερά στοιχεία εάν δεν αντιμετωπιστούν.
Απαντήστε με παραδείγματα
.header {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
background: var(--bg);
z-index: 100;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }
Σκέψεις (γρήγορος πίνακας)
| Παράγοντας | Σύσταση |
|---|---|
| Ασφαλείς περιοχές | Χρήση env(safe-area-inset-*) |
| Viewport | Προτιμώ dvh για περιοχές πλήρους ύψους |
| Z-δείκτης | Δημιουργήστε μία κλίμακα επικάλυψης και τεκμηριώστε την |
37) Ποια είναι η διαφορά μεταξύ της κλιμάκωσης πυκνότητας και της κλιμάκωσης μεγέθους σε στοιχεία, και πότε πρέπει να χρησιμοποιείται η καθεμία;
Η κλιμάκωση πυκνότητας τροποποιεί απόσταση, κενά και ύψος γραμμής ενώ κρατάωping σταθερά μεγέθη γραμματοσειρών, παράγοντας έτσι συμπαγείς, άνετες ή ευρύχωρες παραλλαγές χωρίς να αλλάζει η τυπογραφική ιεραρχία. Η κλιμάκωση μεγέθους αλλάζει το η ίδια η τυπογραφική κλίμακα, μετατοπίζοντας τις επικεφαλίδες, το κυρίως κείμενο και τα στοιχεία ελέγχου σε μεγαλύτερα ή μικρότερα βήματα. Χρησιμοποιήστε κλιμάκωση πυκνότητας για εταιρικά περιβάλλοντα χρήστη όπου η πυκνότητα πληροφοριών ποικίλλει ανάλογα με την εργασία. Χρησιμοποιήστε κλιμάκωση μεγέθους για να ανταποκριθείτε στην απόσταση της συσκευής, τις ανάγκες προσβασιμότητας ή τις απαιτήσεις της επωνυμίας. Αντιμετωπίστε και τα δύο ως διακριτικά με τεκμηριωμένα εύρη για να διασφαλίσετε τη συνέπεια σε όλες τις επιφάνειες.
Απαντήστε με παραδείγματα
/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }
38) Ποια μειονεκτήματα προκύπτουν από τις εκτεταμένες παγκόσμιες επαναφορές και ποιες είναι οι ασφαλέστερες εναλλακτικές λύσεις;
Οι επιθετικές επαναφορές μπορούν να αφαιρέσουν ακούσια ωφέλιμες προεπιλογές, όπως περιγράμματα εστίασης, σημασιολογία λίστας και δυνατότητες ελέγχου φόρμας. Αυτό βλάπτει την προσβασιμότητα και επιβάλλει την περιττή εκ νέου υλοποίηση των εγγενών συμπεριφορών. Ασφαλέστερες εναλλακτικές λύσεις περιλαμβάνουν σύγχρονες κανονικοποιήσεις που τιθασεύουν τις ασυνέπειες διατηρώντας παράλληλα τη σημασιολογία, και επαναφορές με εύρος ζώνης εφαρμόζεται μέσω @layer σε στοιχεία που πραγματικά απαιτούν ένα κενό φύλλο. Καταγράψτε την πολιτική επαναφοράς, επαναφέρετε ρητά κρίσιμα χαρακτηριστικά όπως :focus-visibleκαι αποφύγετε τον μηδενισμό στοιχείων των οποίων οι προεπιλογές μεταδίδουν νόημα, όπως π.χ. b, strongκαι em.
Απαντήστε με παραδείγματα
@layer reset {
*,*::before,*::after { box-sizing: border-box; }
:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */
39) Πώς εντοπίζετε αποτελεσματικά πολύπλοκα προβλήματα cascade χρησιμοποιώντας DevTools και σύγχρονες λειτουργίες CSS;
Η αποτελεσματική διόρθωση σφαλμάτων ξεκινά με την απομόνωση του στοιχείου στο DevTools και την επιθεώρηση του υπολογίζεται για να δείτε τις τελικές τιμές ιδιοτήτων και τις πηγές τους. Στη συνέχεια, ελέγξτε το Στυλ τη σειρά και την εξειδίκευση των κανόνων του παραθύρου για να κατανοήσουμε γιατί ένας κανόνας κέρδισε, δίνοντας προσοχή στο @layer σειρά και αν ένα νέο στοίβαγμα ή ένα περιεχόμενο που περιέχει παρεμβαίνει. Togglκανόνες για την επικύρωση υποθέσεων και χρήση της προβολής καταρράκτη επιπέδων (όπου είναι διαθέσιμη) για την οπτικοποίηση της προτεραιότητας επιπέδων. Προσθέστε προσωρινά περιγράμματα εντοπισμού σφαλμάτων και λάβετε υπόψη τις σημαίες χαρακτηριστικών μέσω @supports για να διχοτομήσετε προβλήματα απενεργοποιώντας επιλεκτικά τις σύνθετες διαδρομές.
Απαντήστε με παραδείγματα
/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }
/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}
40) Πού εντάσσονται τα στυλ εκτύπωσης και τα ερωτήματα πολυμέσων σε έναν επαγγελματικό αγωγό CSS και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματά τους;
Τα στυλ εκτύπωσης παραμένουν απαραίτητα για προϊόντα, τιμολόγια και νομικά αντικείμενα που απαιτούν μεγάλη τεκμηρίωση. Μια επαγγελματική διαδικασία εκτύπωσης περιλαμβάνει ελάχιστη @media print ενότητα που αφαιρεί το μη απαραίτητο Chrome, ορίζει μια αναγνώσιμη μέτρηση και διασφαλίζει ότι η χρήση χρώματος είναι ευανάγνωστη σε συσκευές σε κλίμακα του γκρι. Τα πλεονεκτήματα περιλαμβάνουν βελτιωμένη ποιότητα αρχειοθέτησης και εμπιστοσύνη των χρηστών. Τα μειονεκτήματα περιλαμβάνουν την πρόσθετη συντήρηση και την ανάγκη ελέγχου περιεχομένου που είναι κανονικά διαδραστικό. Διατηρήστε τους κανόνες εκτύπωσης βάσει διακριτικών, αποφύγετε την απόλυτη τοποθέτηση εκτός από τις κεφαλίδες και τα υποσέλιδα και δοκιμάστε τα κοινά προγράμματα περιήγησης και τις γεννήτριες PDF για να αποτρέψετε ανωμαλίες σελιδοποίησης.
Απαντήστε με παραδείγματα
@media print {
nav, .ads, .controls { display: none !important; }
article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
a[href]::after { content: " (" attr(href) ")"; }
img { break-inside: avoid; }
}
41) Ποια στρατηγική παράγει ένα προβλέψιμο σύστημα επικάλυψης και πώς θα πρέπει να διαχειριστείτε ένα z-index κλίμακα?
Ένα προβλέψιμο σύστημα επικάλυψης αντιμετωπίζει την επίστρωση ως τεκμηριωμένη απάτηtract αντί για ad-hoc αριθμούς. Ορίστε μια μικρή, ονομαστική κλίμακα (για παράδειγμα, base, raised, overlay, modal, toast) και αντιστοιχίστε στοιχεία σε επίπεδα μέσω μεταβλητών ή κλάσεων χρησιμότητας. Διατηρήστε κάθε επικάλυψη στο δικό της πλαίσιο στοίβαξης μόνο όταν απαιτείται απομόνωση και αποφύγετε τυχαία πλαίσια από transform or filter εκτός αν είναι σκόπιμο. Το κύριο πλεονέκτημα είναι ότι οι μηχανικοί μπορούν να συλλογιστούν για τις συγκρούσεις χωρίς δοκιμή και λάθος. Το μειονέκτημα είναι μια μέτρια αρχική ταξινόμηση. Συνδυάστε την κλίμακα με διακριτικά σχεδιασμού και ίνες για τιμές εκτός εύρους για να αποφύγετε την απόκλιση.
Κλίμακα επικάλυψης (συγκριτικός πίνακας)
| Κερκίδα | Σκοπός | Τυπικός z-index |
Σημειώσεις |
|---|---|---|---|
| Βάση | Κανονικό περιεχόμενο | 0 | Αποφύγετε τη δημιουργία νέων πλαισίων |
| Μεγαλωμένη | Αυτοκόλλητες κεφαλίδες, συρτάρια | 10-100 | Διατηρήστε τη συνέπεια εντός του κελύφους |
| Επικάλυμμα | Φόντα, μουσαμάδες | 900 | Ασπίδα κλικ πλήρους σελίδας |
| κεφάλαιο | Διάλογοι, επιλογείς | 1000 | Θέση fixed; εστίαση παγίδας |
| Τοστ | Ειδοποιήσεις | 1100 | Μη μπλοκαρισμένη· χρονικά περιορισμένη αφαίρεση |
Απαντήστε με παραδείγματα
:root{
--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }
42) Πώς θα πρέπει να διαμορφώνονται υπεύθυνα τα εγγενή στοιχεία ελέγχου φόρμας και ποια είναι τα οφέλη και τα μειονεκτήματα των κοινών τεχνικών;
Το υπεύθυνο στυλ φόρμας σέβεται τη σημασιολογία, βελτιώνοντας παράλληλα τις δυνατότητες. Ξεκινήστε διατηρώντας τη συμπεριφορά του πληκτρολογίου και του αναγνώστη οθόνης και, στη συνέχεια, βελτιώστε τα επίπεδα: χρησιμοποιήστε accent-color για ελεγχόμενες εισόδους που ευθυγραμμίζονται με την επωνυμία χωρίς αντικατάσταση στοιχείων ελέγχου· εφαρμόστε appearance με φειδώ για την ομαλοποίηση ασυνεπών UI και τη στόχευση των στοιχείων ελέγχου μεταφόρτωσης μέσω ::file-selector-buttonΤο όφελος είναι προσβάσιμοι, συνεπείς έλεγχοι με ελάχιστο JavaΣενάριο. Τα μειονεκτήματα περιλαμβάνουν τις πολλαπλές διαφορές μεταξύ των προγραμμάτων περιήγησης και τον πειρασμό να αντικατασταθούν τα στοιχεία ελέγχου χονδρικά. Καταγράψτε καταστάσεις εστίασης, καταστάσεις σφάλματος και απενεργοποιημένες καταστάσεις ως μέρος του API στοιχείων για την αποφυγή ad-hoc παρακάμψεων.
Απαντήστε με παραδείγματα
/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }
/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }
/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}
43) Ποιες στρατηγικές υπάρχουν για κρίσιμο CSS και διαχωρισμό κώδικα, και ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα;
Το Critical CSS βελτιώνει το Largest Contentful Paint ενσωματώνοντας τους κανόνες που απαιτούνται για το περιεχόμενο στο επάνω μέρος, ενώ αναβάλλει τα υπόλοιπα. Code-η διαίρεση διαιρεί το φύλλο στυλ κατά διαδρομή, χαρακτηριστικό ή στοιχείο. Μια μετρούμενη προσέγγιση συνδυάζει ένα μικρό κρίσιμο κομμάτι με στρωματοποιημένες εξωτερικές δέσμες για συντηρησιμότητα. Τα πλεονεκτήματα είναι η ταχύτερη αντιληπτή φόρτωση και τα μικρότερα αρχικά ωφέλιμα φορτία. Τα μειονεκτήματα περιλαμβάνουν την πολυπλοκότητα κατασκευής και τον κίνδυνο διπλασιασμού εάν δεν καταργηθούν τα διπλότυπα κατά το χρόνο μεταγλώττισης. Προτιμήστε την ντετερμινιστική στρωματοποίηση ( @layer ) και συμβάσεις ονομασίας για να διατηρούνται οι παρακάμψεις σταθερές σε όλα τα κομμάτια.
Στρατηγικές φόρτωσης (συγκριτικός πίνακας)
| Στρατηγική | Oφέλη | Μειονεκτήματα | Τυπική χρήση |
|---|---|---|---|
Ενσωματωμένο κρίσιμο <style> |
Ταχύτερο LCP· κανένα αίτημα | Πιο δύσκολο στη συντήρηση | Κέλυφος που διπλώνει πάνω από το αναδιπλούμενο |
| Ασύγχρονη εξωτερική CSS | Προσαρμοστικό | Κίνδυνος εμφάνισης μη τυποποιημένου περιεχομένου | Διαδρομές εφαρμογών |
| Πακέτα διαχωρισμού μέσων | Φόρτωση υπό όρους | Πολυπλοκότητα· επιβάρυνση δοκιμών | Εκτύπωση, υψηλή ανάλυση dpi, σκοτεινή λειτουργία |
Απαντήστε με παραδείγματα
<link rel="preload" href="/el/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/el/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>
44) Ποιες είναι οι σύγχρονες επιλογές χρωμάτων CSS ( color-mix, σχετική σύνταξη χρώματος, αντιληπτικοί χώροι), και πότε πρέπει να χρησιμοποιούνται;
Το σύγχρονο CSS υποστηρίζει τη σύνθεση χρωμάτων κατά τον χρόνο εκτέλεσης με color-mix() και προσαρμογή στοιχείων μέσω σχετικής σύνταξης χρώματος, επιτρέποντας τη δυναμική δημιουργία θεμάτων χωρίς προμεταγλώττιση. Οι αντιληπτικοί χρωματικοί χώροι όπως το OKLCH ή το Lab παρέχουν πιο ομοιόμορφες ρυθμίσεις φωτεινότητας και χρώματος από το sRGB, καθιστώντας τις ράμπες και τις καταστάσεις (αιχμή, απενεργοποιημένες) πιο συνεπείς. Το κύριο πλεονέκτημα είναι η προβλέψιμη αντίθεση και οι μετατοπίσεις απόχρωσης μεταξύ των θεμάτων. Τα μειονεκτήματα περιλαμβάνουν μερική υποστήριξη σε παλαιότερες μηχανές και την ανάγκη επαλήθευσης της συμμόρφωσης με την επωνυμία. Χρησιμοποιήστε ανάμειξη κατά τον χρόνο εκτέλεσης για καταστάσεις αιώρησης ή έμφασης και αποθηκεύστε κανονικά διακριτικά σε έναν αντιληπτικό χώρο όπου είναι δυνατόν, επιστρέφοντας στο sRGB όταν είναι απαραίτητο.
Απαντήστε με παραδείγματα
:root{
--brand: oklch(60% .15 260);
--brand-hover: color-mix(in oklch, var(--brand), black 12%);
--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }
45) Ποιες τεχνικές δημιουργούν ανθεκτική, ανταποκρινόμενη τυπογραφία και κάθετο ρυθμό;
Η ανθεκτική τυπογραφία εξισορροπεί το ευανάγνωστο μήκος γραμμής, τα κλιμακωτά μεγέθη και την σταθερή απόσταση. Ξεκινήστε με ένα βασικό μέγεθος γραμματοσειράς που σέβεται τις προτιμήσεις του χρήστη και, στη συνέχεια, χρησιμοποιήστε clamp() για να ορίσετε ρευστά βήματα που οριοθετούνται από λογικά όρια. Καθορίστε κάθετο ρυθμό με lh ή ένα σταθερό ύψος γραμμής ρίζας και περιορίστε τις παραγράφους σε chμέτρα που βασίζονται σε text-wrap: balance μπορεί να βελτιώσει τους τίτλους κατανέμοντας τα διαλείμματα πιο ομοιόμορφα, ενώ hyphens: auto και τα μεταδεδομένα γλώσσας μειώνουν τις ακανόνιστες άκρες. Τα οφέλη είναι η αναγνωσιμότητα και η προσβασιμότητα σε όλα τα παράθυρα προβολής. Τα μειονεκτήματα περιλαμβάνουν την ανάγκη δοκιμής συμπλεγμάτων και την εξισορρόπηση της συμπεριφοράς με τις γραμματοσειρές επωνυμίας.
Απαντήστε με παραδείγματα
:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }
46) Πώς γίνεται το scroll snap;ping και η συμπλήρωση/περιθώρια κύλισης συνεργάζονται για να βελτιώσουν την πλοήγηση;
Κύλιση κύλισηςping δημιουργεί ντετερμινιστικές θέσεις ηρεμίας για καρουζέλ και διατάξεις με τομές, ενώ scroll-padding και scroll-margin βεβαιωθείτε ότι οι στόχοι ευθυγραμμίζονται σωστά κάτω από αυτοκόλλητες κεφαλίδες. Χρησιμοποιήστε scroll-snap-type στο δοχείο και scroll-snap-align σε στοιχεία για να καθοδηγήσουν τη συμπεριφορά. Τα οφέλη περιλαμβάνουν συνεπή αίσθηση και βελτιωμένη πλοήγηση πληκτρολογίου με tabindex και άγκυρες. Τα μειονεκτήματα είναι πιθανή απογοήτευση εάν τα σημεία snap είναι πολύ επιθετικά ή δεν είναι συντονισμένα για ορμή σε συσκευές αφής. Παρέχετε λογική συμπλήρωση για το επάνω μέρος του παραθύρου προβολής για να αποφύγετε την απόκρυψη περιεχομένου κάτω από το κολλώδες περιβάλλον χρήστη και επικυρώστε με αλληλεπιδράσεις πληκτρολογίου και δείκτη.
Απαντήστε με παραδείγματα
.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */
47) Ποια μοτίβα CSS καθιστούν τις συμβουλές εργαλείων και τα αναδυόμενα μηνύματα ανθεκτικά, και πότε είναι; JavaΑπαιτείται ακόμα το σενάριο;
Το CSS μπορεί να χειριστεί απλές, κατευθυντικές συμβουλές εργαλείων χρησιμοποιώντας position, λογικές μετατοπίσεις και ::after βέλη, που ενεργοποιούνται από :hover και :focus-visible. Χρήση inset και μετασχηματίζεται για ακριβή τοποθέτηση και @layer βοηθητικά προγράμματα για z-ordering. Για σύνθετα popovers—ανίχνευση σύγκρουσης, επανατοποθέτηση βέλους ή παγίδα εστίασηςping-JavaΤο σενάριο παραμένει απαραίτητο, αλλά το CSS εξακολουθεί να ορίζει τα διακριτικά παρουσίασης. Το πλεονέκτημα των μοτίβων που βασίζονται πρώτα στο CSS είναι η χαμηλή επιβάρυνση και η ομαλή υποβάθμιση. Το μειονέκτημα είναι η περιορισμένη προσαρμοστικότητα στις άκρες του παραθύρου προβολής χωρίς λογική. Να διασφαλίζετε πάντα ότι οι συμβουλές εργαλείων είναι προσβάσιμες από το πληκτρολόγιο και δεν αποκρύπτετε τα βασικά στοιχεία ελέγχου.
Απαντήστε με παραδείγματα
.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
position:absolute; inset-block-end: 100%; inset-inline-start: 0;
opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
z-index: var(--z-raised);
}
48) Πώς σχεδιάζετε πίνακες δεδομένων που προσαρμόζονται στις ανάγκες σας και είναι ευανάγνωστοι, χωρίς να καταφεύγετε σε πολύπλοκες επανεγγραφές;
Οι πίνακες απόκρισης διατηρούν τη σημασιολογία, ενώ προσφέρουν αξιοποιήσιμες προβολές σε στενές οθόνες. Ξεκινήστε με οριζόντια κύλιση μέσα σε ένα περιορισμένο περιτύλιγμα για να αποφύγετε την αναδιαμόρφωση κεφαλίδων και σχέσεων. Για δεδομένα κλειδιού-τιμής, μεταβείτε σε διάταξη στοίβας χρησιμοποιώντας display: grid με ονομασμένες περιοχές ή προσθέστε στοιχεία ελέγχου ορατότητας στηλών για προοδευτική αποκάλυψη. Τα πλεονεκτήματα περιλαμβάνουν τη διατηρημένη προσβασιμότητα και την απλή συντήρηση. Τα μειονεκτήματα είναι ο περιορισμένος χώρος της οθόνης και η ανάγκη για προσεκτικό στυλ υπερχείλισης. Καταγράψτε ποιες στήλες είναι απαραίτητες σε κάθε σημείο διακοπής και προτιμήστε text-overflow με συμβουλές εργαλείων για μεγάλες τιμές.
Προσεγγίσεις (συγκριτικός πίνακας)
| Τεχνική | Oφέλη | Μειονεκτήματα | καλυτερα For |
|---|---|---|---|
| Οριζόντια περιτύλιξη κύλισης | Διατηρεί τη σημασιολογία | Απαιτείται στυλ υπερχείλισης | Πλατιά, πυκνά τραπέζια |
| Σωρευμένη διάταξη κλειδιού-τιμής | Ευανάγνωστο | Χάνει τις εγγενείς λειτουργίες του πίνακα | Προδιαγραφές κινητού, τιμολόγια |
| Εναλλαγές στηλών | Προσαρμοσμένη πυκνότητα | Απαιτείται καλωδίωση JS | Πίνακες ελέγχου διαχειριστή |
Απαντήστε με παραδείγματα
.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
49) Πότε οι λειτουργίες ανάμειξης, τα φίλτρα και οι μάσκες παρέχουν πρακτική αξία και ποια είναι τα συμβιβαστικά οφέλη;
Λειτουργίες ανάμειξης ( mix-blend-mode, background-blend-mode ), φίλτρα ( blur, grayscale, drop-shadow ), και μάσκες ( mask-image, mask-composite ) επιτρέπουν εφέ όπως ο μορφισμός του γυαλιού, οι διτονικές αποχρώσεις και οι μη ορθογώνιες αποκαλύψεις χωρίς επεξεργασία raster. Λάμπουν σε επιφάνειες μάρκετινγκ και σε τόνους δεδομένων όπου η καλλιτεχνική κατεύθυνση έχει σημασία. Τα πλεονεκτήματα είναι η μειωμένη αύξηση των πόρων και η δυναμική θεματοποίηση. Τα μειονεκτήματα περιλαμβάνουν το κόστος απόδοσης σε συσκευές χαμηλής κατανάλωσης και πιθανά προβλήματα προσβασιμότητας εάν μειωθεί η αντίθεση. Κρατήστε τα βαριά εφέ για μη κρίσιμες επιφάνειες, δοκιμάστε την επίδραση της GPU και παρέχετε μειωμένα προεπιλογές εφεδρικών επιλογών.
Απαντήστε με παραδείγματα
.hero::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
mix-blend-mode: screen; filter: blur(20px);
}
50) Ποιος είναι ο ρόλος που παίζουν; color-scheme και η θεματολογία του UI του συστήματος παίζουν με συνεκτικό στυλ σε όλα τα προγράμματα περιήγησης;
The color-scheme Η ιδιότητα δηλώνει τις προβλεπόμενες ανοιχτόχρωμες και σκούρες παλέτες, έτσι ώστε τα στοιχεία του παράγοντα χρήστη (στοιχεία ελέγχου φόρμας, γραμμές κύλισης σε ορισμένες μηχανές) να αποδίδονται με αντίστοιχα φόντα και χρώματα κειμένου. Αυτό μειώνει την ανάγκη για προσαρμοσμένα skins στοιχείων ελέγχου και αποτρέπει τις ενοχλητικές αναντιστοιχίες όταν είναι ενεργή η σκοτεινή λειτουργία. Το πλεονέκτημα είναι η συνοχή με ελάχιστο κώδικα. Το μειονέκτημα είναι ότι η ισοτιμία μεταξύ μηχανών εξελίσσεται και η προσαρμοσμένη επωνυμία ενδέχεται να εξακολουθεί να απαιτεί παρακάμψεις. Συνδυασμός color-scheme με προσαρμοσμένες ιδιότητες για διακριτικά και επιτρέπει ρητές παρακάμψεις χρηστών για την αποφυγή παγίδευσηςping χρήστες σε μια προτίμηση συστήματος που δεν επέλεξαν.
Απαντήστε με παραδείγματα
:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */
🔍 Κορυφαίες ερωτήσεις συνέντευξης CSS με πραγματικά σενάρια και στρατηγικές απαντήσεις
1) Ποια είναι η διαφορά μεταξύ inline, inline-blockκαι block στοιχεία στο CSS;
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να ελέγξει την κατανόησή σας σχετικά με τις ιδιότητες εμφάνισης στοιχείων και τον τρόπο με τον οποίο επηρεάζουν τη διάταξη και τα μοντέλα πλαισίου.
Παράδειγμα απάντησης:
«Στον προηγούμενο ρόλο μου, συχνά αντιμετώπιζα ασυνέπειες στη διάταξη που προκλήθηκαν από παρεξήγηση των τύπων οθόνης.» block Το στοιχείο καταλαμβάνει όλο το διαθέσιμο πλάτος και ξεκινά σε μια νέα γραμμή. inline Το στοιχείο καταλαμβάνει μόνο όσο πλάτος έχει το περιεχόμενό του και δεν ξεκινά σε νέα γραμμή. inline-block Το στοιχείο επιτρέπει τον ορισμό πλάτους και ύψους όπως ένα στοιχείο μπλοκ, αλλά ρέει ενσωματωμένα όπως το κείμενο. Η κατανόηση αυτών των διακρίσεων με βοήθησε να βελτιώσω τα responsive σχέδια και να διατηρήσω συνεπή ευθυγράμμιση.
2) Πώς προσεγγίζετε την αντιμετώπιση προβλημάτων CSS σε σύνθετες διατάξεις;
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να γνωρίζει τη συστηματική σας προσέγγιση στον εντοπισμό και τη διόρθωση σφαλμάτων στη διάταξη.
Παράδειγμα απάντησης:
«Σε προηγούμενη θέση, ακολούθησα μια δομημένη προσέγγιση για την αποσφαλμάτωση CSS. Χρησιμοποίησα εργαλεία προγραμματιστών προγραμμάτων περιήγησης για να ελέγξω τα υπολογισμένα στυλ και τα μοντέλα κουτιών, απομόνωσα επιλογείς που έρχονται σε σύγκρουση και απενεργοποίησα κανόνες βήμα προς βήμα. Χρησιμοποίησα επίσης προθέματα ειδικά για προγράμματα περιήγησης και τα δοκίμασα σε πολλές συσκευές. Αυτή η μεθοδική διαδικασία αποσφαλμάτωσης μείωσε σημαντικά τα προβλήματα διάταξης front-end.»
3) Μπορείτε να εξηγήσετε πώς λειτουργεί η καταρράκτη και η εξειδίκευση του CSS;
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να αξιολογήσει τις γνώσεις σας σχετικά με το πώς τα προγράμματα περιήγησης καθορίζουν ποιοι κανόνες CSS έχουν προτεραιότητα.
Παράδειγμα απάντησης:
«Η διαδικασία CSS cascade είναι η διαδικασία που καθορίζει ποιοι κανόνες ισχύουν όταν πολλαπλοί επιλογείς στοχεύουν το ίδιο στοιχείο. Η εξειδίκευση καθορίζει την προτεραιότητα, με τα inline στυλ να είναι τα υψηλότερα, ακολουθούμενα από τα ID, έπειτα από τις κλάσεις, τις ψευδοκλάσεις και τέλος τα στοιχεία. Η σειρά προέλευσης έχει επίσης σημασία εάν η εξειδίκευση είναι ίση. Η γνώση αυτού βοηθά στην αποτροπή της ακούσιας αντικατάστασης στυλ και προωθεί τον καθαρότερο κώδικα.»
4) Περιγράψτε πώς χειρίζεστε το responsive design χωρίς να βασίζεστε σε μεγάλο βαθμό σε frameworks.
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής ελέγχει την κατανόησή σας σχετικά με την ευελιξία του CSS και τη χρήση ερωτημάτων πολυμέσων.
Παράδειγμα απάντησης:
«Στον τελευταίο μου ρόλο, σχεδίασα responsive layouts χρησιμοποιώντας ρευστά πλέγματα, σχετικές μονάδες όπως em και remκαι ερωτήματα πολυμέσων για την προσαρμογή διατάξεων σε διαφορετικά πλάτη οθόνης. Χρησιμοποίησα επίσης το CSS Grid και το Flexbox για ευέλικτες διατάξεις. Αυτή η προσέγγιση απέφυγε τις περιττές εξαρτήσεις από τα frameworks, διατηρώντας παράλληλαping ο σχεδιασμός είναι επεκτάσιμος και συντηρήσιμος.
5) Πώς θα βελτιστοποιούσατε το CSS για απόδοση και συντηρησιμότητα;
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής αξιολογεί την επίγνωσή σας σχετικά με τις βέλτιστες πρακτικές για την επεκτασιμότητα και την απόδοση.
Παράδειγμα απάντησης:
«Στην προηγούμενη δουλειά μου, βελτιστοποίησα το CSS αφαιρώντας αχρησιμοποίητα στυλ, συνδυάζοντας αρχεία για να μειώσω τα αιτήματα HTTP και εφαρμόζοντας μεταβλητές CSS για λόγους συντήρησης. Υιοθέτησα επίσης συμβάσεις ονοματοδοσίας BEM για να διατηρήσω τον κώδικα οργανωμένο και εύκολο στην κλιμάκωση. Επιπλέον, χρησιμοποίησα σύγχρονα εργαλεία όπως το PostCSS και το minification για να βελτιώσω την απόδοση.»
6) Πείτε μου για μια περίπτωση που χρειάστηκε να συνεργαστείτε με προγραμματιστές ή σχεδιαστές για να επιλύσετε μια διένεξη σχετικά με το στυλ.
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να δει ομαδική εργασία και επικοινωνιακές δεξιότητες σε διαλειτουργικά περιβάλλοντα.
Παράδειγμα απάντησης:
«Σε ένα προηγούμενο έργο, προέκυψε μια σύγκρουση μεταξύ των προσδοκιών σχεδιασμού και της υλοποίησης μιας δυναμικής φόρμας από τον προγραμματιστή. Προγραμμάτισα έναν γρήγορο συγχρονισμό και με τα δύο μέρη, παρουσίασα το οπτικό πρόβλημα χρησιμοποιώντας στιγμιότυπα οθόνης και πρότεινα προσαρμογές μεταβλητών CSS για να διατηρήσω τη συνέπεια του σχεδιασμού. Αυτή η προληπτική συνεργασία εξασφάλισε ένα οπτικά ευθυγραμμισμένο αποτέλεσμα χωρίς να επηρεάσει την απόδοση.»
7) Ποιες προκλήσεις αντιμετωπίσατε κατά την εφαρμογή κινούμενων εικόνων ή μεταβάσεων CSS και πώς τις ξεπεράσατε;
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να αξιολογήσει την κατανόησή σας σχετικά με τη βελτιστοποίηση απόδοσης και την απόδοση του προγράμματος περιήγησης.
Παράδειγμα απάντησης:
«Σε ένα έργο, τα κινούμενα σχέδια προκάλεσαν ατημέλητη εικόνα λόγω προβλημάτων αναδιαμόρφωσης. Εντόπισα ότι ορισμένες ιδιότητες CSS, όπως top και left ενεργοποιούσαν επανυπολογισμούς διάταξης. Άλλαξα στη χρήση transform και opacity, τα οποία επιταχύνονται μέσω GPU, οδηγώντας σε ομαλότερες μεταβάσεις. Επίσης, βελτιστοποίησα τις διάρκειες της κινούμενης εικόνας για μια φυσική αίσθηση.
8) Πώς θα δομήσετε το CSS για μια εφαρμογή μεγάλης κλίμακας;
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να κατανοήσει την προσέγγισή σας στην οργάνωση, την επεκτασιμότητα και τη συντηρησιμότητα.
Παράδειγμα απάντησης:
«Θα χρησιμοποιούσα μια αρθρωτή αρχιτεκτονική όπως BEM, SMACSS ή CSS Modules για να δομήσω λογικά τα στυλ. Κάθε στοιχείο θα είχε τα δικά του στυλ με εύρος για να αποφευχθούν οι συγκρούσεις. Θα εφάρμοζα επίσης έναν οδηγό στυλ και συμβάσεις ονοματοδοσίας για να διατηρήσω τη συνέπεια μεταξύ των ομάδων και να αποτρέψω την υπερφόρτωση του CSS καθώς το έργο αναπτύσσεται.»
9) Ας υποθέσουμε ότι ένας πελάτης παραπονιέται ότι μια διάταξη σελίδας παρουσιάζει σφάλματα στον Internet Explorer 11. Ποια βήματα θα ακολουθούσατε για να το επιλύσετε;
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να δοκιμάσει την προσαρμοστικότητά σας σε προβλήματα παλαιού τύπου προγραμμάτων περιήγησης.
Παράδειγμα απάντησης:
«Αρχικά, θα αναπαράγω το πρόβλημα χρησιμοποιώντας την ίδια έκδοση του προγράμματος περιήγησης. Στη συνέχεια, θα εντοπίζω μη υποστηριζόμενες λειτουργίες CSS μέσω εργαλείων ανάπτυξης προγράμματος περιήγησης και θα ελέγχω τη συμβατότητα χρησιμοποιώντας πόρους όπως το MDN ή το Can I Use. Στη συνέχεια, θα εφαρμόζω εφεδρικά αρχεία ή polyfills, όπως απαιτείται. Θα καταγράφω επίσης την επιδιόρθωση για μελλοντική συντήρηση.»
10) Πώς διασφαλίζετε τη συμβατότητα μεταξύ προγραμμάτων περιήγησης στα έργα CSS σας;
Αναμενόμενα από τον υποψήφιο: Ο συνεντευξιαστής θέλει να επιβεβαιώσει την επίγνωσή σας σχετικά με τα πρότυπα δοκιμών και συμβατότητας.
Παράδειγμα απάντησης:
«Εξασφαλίζω τη συμβατότητα μεταξύ προγραμμάτων περιήγησης δοκιμάζοντας νωρίς και συχνά σε βασικά προγράμματα περιήγησης χρησιμοποιώντας εργαλεία όπως το BrowserStack. Ακολουθώ τα πρότυπα CSS και αποφεύγω τις μη τυπικές ιδιότητες. Χρησιμοποιώ επίσης το PostCSS με το Autoprefixer για την αυτόματη διαχείριση των προθεμάτων προμηθευτών. Η συνεπής επικύρωση και οι δοκιμές κατά την ανάπτυξη αποτρέπουν σημαντικά προβλήματα μετά την κυκλοφορία.»
