Κεντράροντας δυναμικά html elements μόνο με CSS

[Anastasis 48]

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

 

Αλλά ειλικρινά έχω κουραστεί να μου μιλάνε για αιωνόβιους browsers, επειδή κάποιος έχει παραμείνει στα xp γιατί βαριέται ή μετά από 5-6 χρόνια με υπολογιστή στο ελάχιστο δεν έχει μάθει να περνάει ένα νέο λειτουργικό μόνος του. Πάμπολλες φορές έχω πει σε φίλους που δεν μπορούν να πληρώσουν νέο υπολογιστή ή αναβάθμιση και ούτε καινούργια windows, να βάλουν linux. Άλλοι δυσκολεύονται… Άλλοι λένε ότι παίρνω ποσοστά…

 

Θέλω να δουλεύω με καινούργια χαρακτηριστικά! Χαρακτηριστικά και ανέσεις που έχεις στον desktop προγραμματισμό χωρίς να τις έχεις ζητήσεις! Γιατί εννοούνται…

 

Έτσι λοιπόν, καθώς έγγραφα κώδικα αργά χθες το βράδυ… και ξαναείδα ένα σπαστικό! loader να ξανα-πηγαίνει δεξιά, γιατί προφανώς αυτός που τον προσάρμοσε, έχει βαρεθεί να διαβάσει το w3c!   Άνοιξα ένα επιπλέον editor, τον brackets (είναι opensource της adobe, έχει πολύ καλό μέλλον), που είναι ελαφρύς και έχει standard χαρακτηριστικό το live reload!

 

Τελικά βρήκα ένα τρόπο, έτσι ώστε να κεντράρω, οποιοδήποτε αντικείμενο με θέση absolute, ακολουθώντας ένα pattern! Κατ’ αρχή πρέπει να ξέρουμε ότι τα  αντικείμενα που ταξινομούνται στην οθόνη από το absolute mod, έχουν σχετικό positioning system, που σημαίνει ότι παίρνουν σημείο αναφοράς το κοντινότερο πατρικό αντικείμενο με θέση absolute ή relative και αν αυτό δεν υπάρχει, σημείο αναφοράς είναι το αντικείμενο του document.

 

Οπότε μέρος του pattern είναι να θέτουμε πάντα το πατρικό αντικείμενο που θεωρούμε στόχο ως absolute η relative και να μην υπάρχει ενδιάμεσο πατρικό που να έχει αυτά τα δύο mods. Να έχουμε υπόψη και το box type που χρησιμοποιούμε, το default στους περισσότερους browsers είναι το content-box, που αυτό πάει να πει ότι  το border και το padding συμπεριλαμβάνονται στον υπολογισμό, ενώ εάν έχουμε border-box, όχι.

 

Μετά έχουμε απλά ένα μικρό κομμάτι κώδικα css που διαφέρει. Ανάλογα το box-sizing!

 

Παραδείγματα:

 

Παράδειγμα με content-box:

 

/* Parent element .wrapper */

 

.wrapper {
width: 100%;
position: relative;
padding: 0 calc(50% – 175px); /* Τρικ για κεντράρισμα αντί για margin: 0 auto; Είναι για κεντράρεις κείμενο με μήκος παραγράφου 350px */
box-sizing: content-box;
}

 

/* Αντικείμενο για κεντράρισμα .loader */

 

.loader {
height: 75px;
width: 75px;

 

position: absolute;
left: calc(25% + 37.5px); /* [50%/2 + width/2]  */
top: calc(25% + 37.5px); /* [50%/2 + height/2] */
}

 

 

 

– Στο content-box η absulte θέση, υπολογίζεται μετά το padding, οπότε το από το padding έχει μείνει το μισό του πραγματικού μήκους, οπότε για να κεντράρουμε θέλουμε το [υπολειπόμενο μήκος] / 2 +το μισό μήκος του στοιχείου (Εδώ μπορεί να μη είναι απόλυτο για όλους όσο αφορά το μισό μήκος του στοιχείου, ωστόσο, έτσι δουλεύει μέχρι στιγμής!). Το 50% αναφέρεται στο μήκος του πατρικού στοιχείου!

 

Ακολούθως είναι και το ύψος!

 

 

 

Παράδειγμα με border-box:

 

.wrapper {
width: 100%;
position: relative;
padding: 0 calc(50% – 175px);
box-sizing: border-box;

 

}

 

.loader {
height: 75px;
width: 75px;

 

position: absolute;
left: calc(50% – 37.5px);
top: calc(50% – 37.5px);
}

 

 

 

-Εδώ δεν λαμβάνεται υπόψη στον υπολογισμό το padding. Οπότε μπορούμε εύκολα να  πούμε 50% μείον το μισό του αντικειμένου loader, που είναι πιο λογικό! Και έχουμε το ίδιο ωραίο αποτέλεσμα!

 

 

 

Η υποστήριξη για το calc function είναι αρκετά καλή! Ωστόσο, δεν γλυτώνει κανείς τα javascript fallbacks για production sites! Αλλά καιρός είναι να αρχίσουμε να τα αφήνουμε αυτά πίσω!