7 Σημαντικές συμβουλές διάταξης CSS

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

Συμβουλή 1: Διαγράψτε τις προεπιλεγμένες ρυθμίσεις συμπλήρωσης και περιθωρίων πριν ξεκινήσετε να εργάζεστε.
Διαφορετικά προγράμματα περιήγησης έχουν διαφορετικά προεπιλεγμένα μεγέθη περιθωρίου και πλήρωσης, ώστε να θέλετε να ξεκινήσετε με μια καθαρή πλάκα, ας πούμε έτσι. Χρησιμοποιήστε αυτήν την εντολή:

*
{
περιθώριο: 0;
επένδυση: 0;
περίγραμμα: 0;
}

για να διαγράψετε όλες τις προεπιλεγμένες ρυθμίσεις περιθωρίου και συμπλήρωσης. Σημειώστε επίσης το περίγραμμα, το οποίο έχει οριστεί στο 0. Λάβετε υπόψη ότι εάν το κάνετε αυτό, θα απαλλαγείτε επίσης από τις ενοχλητικές μωβ περιγράμματα γύρω από τις εικόνες με δυνατότητα κλικ, αν και μερικοί άνθρωποι υποστηρίζουν ότι το μωβ περίγραμμα είναι απαραίτητο για προσβασιμότητα και χρηστικότητα. Αλλά σε πολλούς ανθρώπους δεν αρέσουν οι μωβ στρογγυλές εικόνες, και αυτός είναι ένας τρόπος με τον οποίο μπορείτε να απαλλαγείτε από αυτό με μια κίνηση χωρίς να χρειάζεται να ορίσετε img border=0 για κάθε εικόνα (πράγμα που αντίκειται στους αυστηρούς κανόνες σήμανσης σε κάθε περίπτωση).

Συμβουλή 2 : Για να κεντράρετε τη διάταξή σας, χρησιμοποιήστε ένα κοντέινερ για να περιέχει όλο το περιεχόμενό σας
Δηλώστε το ως εξής:

#δοχείο

{
περιθώριο: 0 αυτόματο;
πλάτος: xxxpx;
}

Υπάρχουν μερικά σημεία εδώ που πρέπει να λάβετε υπόψη. ΜΗΝ δηλώσετε ότι το πλάτος είναι 100%. Αυτό νικάει ολόκληρο το αντικείμενο αφού θα πρέπει απλώς να δηλώσετε τα δευτερεύοντα στοιχεία μέσα στο κοντέινερ και στη συνέχεια να τα κεντράρετε χρησιμοποιώντας περιθώριο: 0 αυτόματο. Αυτό είναι ΠΟΛΥ ΚΑΚΟ, καθώς σημαίνει ότι αντί να δηλώσετε την κεντρική διάταξη μία φορά, θα πρέπει να τη δηλώσετε σε πολλά σημεία για κάθε στοιχείο μέσα στο κοντέινερ σας.

Συμβουλή 3: Εργαστείτε από πάνω προς τα κάτω
Κυριολεκτικά ξεκινήστε να εργάζεστε στη διάταξη CSS σας ξεκινώντας από τα κορυφαία περισσότερα στοιχεία στο σχέδιό σας, καθώς και τα «κορυφαία» στοιχεία στο HTML σας, όπως το σώμα, καθώς και τα κύρια κοντέινερ.

Δηλώστε τις εντολές σας στο CSS στο υψηλότερο δυνατό επίπεδο και προσπαθήστε να δηλώσετε κάτι μόνο μία φορά και αφήστε το να διαρρεύσει. Παράκαμψη των εντολών σε χαμηλότερο επίπεδο μόνο όταν είναι απολύτως απαραίτητο. Αυτό αποτρέπει ένα περίπλοκο αρχείο CSS που είναι δύσκολο να διατηρηθεί και να κατανοηθεί. Για παράδειγμα, αν έχετε { περιθώριο : 0 αυτόματο} ρυθμίσεις σε κάθε sub div στο κοντέινερ σας – αντιμετωπίζετε προβλήματα.

Συμβουλή 4: Τεκμηριώστε τι κάνετε και χρησιμοποιήστε το Firebug και το πρόγραμμα περιήγησης Firefox για εντοπισμό σφαλμάτων
Δεν γράφετε τον κώδικα CSS σας μόνο για τον εαυτό σας, κάποια μέρα θα χρειαστεί να τον διορθώσετε. Κάντε πολλά σχόλια μέσα στο αρχείο CSS για να εξηγήσετε γιατί κάνετε τα πράγματα με συγκεκριμένο τρόπο.

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

Το μόνο πρόβλημα με αυτό είναι ότι το σχέδιό σας μπορεί να λειτουργεί τέλεια στον Firefox, αλλά όχι σε IE5, IE6 ή IE7. Αυτό μας φέρνει στην επόμενη συμβουλή.

Συμβουλή 5: Αποφασίστε για ποια προγράμματα περιήγησης πρόκειται να δημιουργήσετε το CSS σας και δοκιμάστε από την αρχή
Ορισμένοι καθαρολόγοι επιμένουν να διασφαλίζουν ότι ο ιστότοπός σας λειτουργεί για όλα τα πιθανά προγράμματα περιήγησης, άλλοι τον κάνουν να λειτουργεί μόνο για τα «κυριότερα» προγράμματα περιήγησης. Πώς γνωρίζετε ακριβώς ποια προγράμματα περιήγησης χρησιμοποιούνται περισσότερο; Για άλλη μια φορά τα σχολεία W3 έρχονται στη διάσωση.

Στην επόμενη σελίδα, μπορείτε να δείτε ποια προγράμματα περιήγησης είναι τα πιο δημοφιλή: http://www.w3schools.com/browsers/browsers_stats.asp. Από αυτή τη σελίδα μπορείτε να δείτε ότι κάτι σαν το IE5 χρησιμοποιείται μόνο από περίπου το 1.1% των προγραμμάτων περιήγησης. Εναπόκειται σε εσάς εάν θεωρείτε ότι αξίζει τον κόπο να δημιουργήσετε το CSS σας ώστε να είναι συμβατό με αυτό το πρόγραμμα περιήγησης ή εάν απλώς πρόκειται να δοκιμάσετε τη συμβατότητά σας με τους IE6, IE7 και Firefox, για παράδειγμα. Ό,τι κι αν κάνετε, όταν αρχίσετε να δημιουργείτε το CSS σας, ξεκινήστε από την κορυφή και δοκιμάστε κάθε ρύθμιση σε κάθε ένα από τα προγράμματα περιήγησης καθώς προχωράτε. Δεν υπάρχει τίποτα χειρότερο από το να δημιουργήσετε έναν τέλειο ιστότοπο στον Firefox και μετά να ανακαλύψετε αμέσως μετά την κωδικοποίηση ενός αρχείου css 1000 γραμμών ότι είναι σπασμένο στον IE6. Στη συνέχεια, διορθώστε και διορθώστε τον κώδικά σας αφού το γεγονός είναι εφιάλτης.

Συμβουλή 6: Ακολουθεί μια ενοχλητική μικρή συμβουλή για τη διόρθωση του CSS σε IE6 ή IE7
Ας υποθέσουμε ότι το σχέδιό σας λειτουργεί τέλεια στον Firefox, αλλά είναι σπασμένο στον IE6. Δεν μπορείτε να χρησιμοποιήσετε το Firebug για να προσδιορίσετε πού μπορεί να είναι το πρόβλημα, καθώς ΛΕΙΤΟΥΡΓΕΙ στον Firefox. Δεν έχετε την πολυτέλεια να χρησιμοποιείτε το Firebug στον IE6, πώς μπορείτε λοιπόν να διορθώσετε ένα φύλλο στυλ IE6 ή IE7; Συχνά ανακάλυψα ότι βοηθάει να προσθέτω {border : 1 px συμπαγές κόκκινο} or {border : 1 px στερεό μωβ} στα προβληματικά στοιχεία. Με αυτόν τον τρόπο μπορείτε συχνά να δείτε γιατί ορισμένα στοιχεία δεν ταιριάζουν στον διαθέσιμο χώρο. Είναι μια ενοχλητική μικρή συμβουλή αφού είναι τόσο πρωτόγονη και απλή, αλλά λειτουργεί!

Συμβουλή 7: Κατανοήστε τους πλωτήρες
Η αιώρηση στοιχείων είναι απαραίτητη για την κατανόηση, ειδικά στο πλαίσιο της λειτουργίας των αιωρούμενων στοιχείων σας στα διάφορα προγράμματα περιήγησης!

Βασικά στοιχεία όπως τα div επιπλέουν προς τα αριστερά ή προς τα δεξιά (ποτέ προς τα πάνω ή προς τα κάτω, μόνο στο πλάι). Εδώ είναι μερικά πράγματα που πρέπει να λάβετε υπόψη με τα αιωρούμενα στοιχεία. Κάθε αιωρούμενο στοιχείο πρέπει να έχει καθορισμένο ρητό πλάτος. Εάν χρησιμοποιείτε floated div για να δημιουργήσετε μια διάταξη 3 στηλών ή 2 στηλών, προσδιορίστε τα πλάτη σε ποσοστά και όχι σε σταθερά πλάτη και εάν χρησιμοποιείτε ποσοστά, βεβαιωθείτε ότι τα ποσοστά δεν αθροίζονται σε 100 %, αυτό θα κάνει συχνά τη δεξιά στήλη να πέσει κάτω από τις υπόλοιπες, υποδεικνύοντας ξεκάθαρα ότι προσπαθείτε να χωρέσετε κάτι στον διαθέσιμο χώρο που είναι πολύ μεγάλος για αυτήν. Χρησιμοποιήστε μάλλον ποσοστά που αθροίζονται ελαφρώς κάτω από το 100%, όπως 25%, 49%, 24% για αριστερή στήλη, μεσαία στήλη και δεξιά στήλη.

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

Συμπέρασμα
Αυτές οι συμβουλές CSS για τη διάταξη ελπίζουμε ότι θα σας εξοικονομήσουν λίγο χρόνο και προσπάθεια όταν θα πρέπει στη συνέχεια να νικήσετε ένα σχέδιο χωρίς τραπέζι για υποβολή! Αυτή ήταν μια guest post που έγραψε η Christine Anderssen.