Έλυσα ένα πρόβλημα δεκαετίας. Συμβατότητα με παλιούς browsers. Άρθρο για συναδέλφους.

Post Photo
Thursday, 01 October 2020

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

Προφανώς και αναφέρομαι στη δημιουργία ενός CMS ή τη δημιουργία ενός σχεδιαστικού.

Σε ότι αφορά τον κώδικα του πυρήνα του συστήματος δεν υπάρχει πρόβλημα αν χρησιμοποιείς οτιδήποτε εκτελείται στο διακομιστή. Χρησιμοποιώ PHP εδώ και πολλά χρόνια. Τουλάχιστον σε ό,τι αφορά τον κώδικα HTML που δημιουργεί είμαι σίγουρος τι φτάνει στο χρήστη. Δεν εξαρτάται από το χρήστη αλλά το διακομιστή.

Το πρόβλημα υπάρχει στην απεικόνιση και για την ακρίβεια στο CSS. Εκεί ακριβώς αρχίζει η φρίκη. Από που να το πιάσεις.

Υπάρχουν διάφορες "λύσεις" που τουλάχιστον για μένα δεν αποτελούν λύσεις.

Ανίχνευση μέσω PHP

Θα αναφέρω πρώτη την πιο χαζή. Να προσπαθήσεις να δεις μέσω PHP τι browser έχει ο χρήστης. Πρώτα από όλα δεν μπορεί πάντα να δεις μέσω PHP τι browser έχει. Ακόμα και αν τα καταφέρεις οι browsers παρουσιάζονται με μια συμβολοσειρά-σαβούρα η οποία είναι από αναξιόπιστη έως άχρηστη. Πάει αυτό.

CSS Prefixes

Η δεύτερη λύση είναι να χρησιμοποιήσεις CSS prefixes. Απλό είναι Τομ. Απλά κάνεις τα αρχεία των CSS διπλάσια και τα πλακώνεις στα prefixes. Υπάρχουν μια χαρά autoprefixers που κάνουν αυτή τη δουλειά. Η αλήθεια είναι ότι τα prefixes τουλάχιστον για τη δική μου περίπτωση είναι άχρηστα. Ας το διαλευκάνω. Ας πούμε ότι η σελίδα σου χρησιμοποιεί παντού CSS Grid ή Flexbox και ο browser δεν υποστηρίζει τίποτε από τα δυο. Τα prefixes σε αυτή την περίπτωση είναι άχρηστα. Αν δεν υποστηρίζει καθόλου την τεχνολογία τότε η σελίδα φαίνεται εντελώς χάλια. Από την άλλη όλοι οι μοντέρνοι περιηγητές αναγκάζονται να διαβάσουν όλη αυτή τη σαβούρα με τα prefixes και στο τέλος να τα αγνοήσουν. Τα αρχεία CSS όμως πρέπει να κατεβούν ολόκληρα πρώτα πριν συμβεί αυτό.

@supports

Ναι οι σχετικά σύγχρονοι browsers επιτρέπουν τη χρήση @supports queries. Τι να το κάνω αυτό. Εμένα με ενδιαφέρουν οι παλιοί browsers. Τι κάνει ο browser αν δεν καταλαβαίνει τα @supports; Τα αγνοεί. Μπορείς να χρησιμοποιήσεις ακριβώς αυτό το "αγνοεί" για να κάνεις τη δουλειά σου. Ο κώδικας που παράγεται με αυτή τη μέθοδο δεν μου αρέσει. Δημιουργεί δομές μπουρδέλα. Αν το υποστηρίζει, αν το αγνοεί, αν το υποστηρίζει και δεν το αγνοεί. Τρέχα γύρευε. Σκοπός είναι να έχεις καθαρά αρχεία CSS για το 90% των ανθρώπων που έχουν κάπως σύγχρονο browser.

Σελίδα με αισθητική δεκαετίας του 90

Μια λύση που χρησιμοποιούν πολλοί. Χρησιμοποιείς μόνο εντολές που υπάρχουν εδώ και 10-15 χρόνια. Με αυτόν το τρόπο προφανώς εκτελούνται από παλιούς περιηγητές. Συγνώμη αλλά δεν μπορώ να γράφω κώδικα με αποτέλεσμα Σάκη Ρουβά με χαίτη. Έγραψα υπερβολικά πολύ από αυτό και βασανίστηκα ατελείωτες ώρες να κάνω τις γαμωσελίδες εκείνης της εποχής να δουλεύουν κάπως σωστά. Αγαπώ την τεχνολογία και μόλις βγει κάτι θέλω να δω πως δουλεύει και αν γίνεται να το χρησιμοποιήσω αμέσως.

Η λύση που χρησιμοποίησα στο VerdinCMS

Την ιδέα μου την έδωσε ένας Ρώσος προγραμματιστής. Έγραφε στην περιγραφή του Project του που δείχνει να απαίτησε τεράστια δουλειά να μην το χρησιμοποιήσω γιατί είναι παντελώς άχρηστο (!) και να ασχοληθώ με feature detections. Ανάγνωση λειτουργιών που υποστηρίζει ο browser ασχέτως ποια μηχανή χρησιμοποιεί. Είναι και το πιο λογικό. Δες αν το υποστηρίζει, αν όχι κάνε κάτι άλλο.

Πήγα λοιπόν στη σελίδα του https://modernizr.com/. Όχι δεν κατέβασα όλο το παραμύθι. Σου δίνει τη δυνατότητα να δημιουργήσεις ένα JS που σκανάρει μόνο για αυτό που θέλεις. Το δικό μου είναι 4,72KB και συμπιεσμένο 2,26KB (έτσι ταξιδεύει από τον Server). Επιβαρύνει το χρόνο της σελίδας κατά.. 0. Επέλεξα μόνο το σκανάρισμα CSS Grid.

Η σελίδα μου χρησιμοποιεί CSS Grid παντού. Μπορείς να κάνεις θαύματα με αυτό. Ιδίως στη διαχείριση που είναι πιο πολύπλοκη. Άρα αν ο χρήστης των σελίδων μου δεν έχει CSS Grid την έβαψε. Η σελίδα παρουσιάζεται σκουπίδια.

Αποφάσισα να ψάχνω για αυτό. Μόνο για αυτό. Υποστήριξη CSS Grid έχουν οι περιηγητές από το 2017. Άρα έτσι απλά αυθαίρετα ό,τι δεν υποστηρίζει Grid το βαφτίζω Legacy. Τι κάνω μόλις το modernizr μου πει ότι δεν υποστηρίζει Grid; Αντικαθιστώ τη διεύθυνση του κεντρικού style.css με ένα άλλο με το όνομα legacy.css. Αλλάζω το href δηλαδή εντελώς μέσω κλασικής Javascript. Δεν υπάρχει πια το style.css.

if (!Modernizr.cssgrid) {
    var baseUrl = document.getElementById('logo').href;
    document.getElementById('css-style').href = baseUrl + "content/theme/legacy.min.css?v=6.00";
}

Στο legacy.css απαγόρευσα στον εαυτό μου να χρησιμοποιήσει οποιαδήποτε σύγχρονη εντολή CSS.  Χρησιμοποιώ δηλαδή floats, inline-blocks και αποφεύγω margins διότι οι παλιοί περιηγητές βγάζουν σπυριά με αυτό (IE double margin bug). Δεν χρησιμοποιώ rgba() χρώματα και γενικά οτιδήποτε περίεργο. Με τον τρόπο αυτό η σελίδα λειτουργεί και έχει σχετικά κανονική εμφάνιση. Προφανώς δεν ήθελα να είναι γαμώ τις σελίδες σε παλιούς περιηγητές. Ήθελα να δουλεύει και να μοιάζει κάπως επαγγελματικό το αποτέλεσμα. Το έκανα λοιπόν και η σελίδα που βρίσκεται μπροστά σας ήδη δουλεύει έτσι.

Το δοκίμασα σε διάφορες εικονικές μηχανές που έχω και δουλεύει άριστα. Το modernizr δεν χρησιμοποιεί JS ES6 οπότε εκτελείται και σε αρχαιολογίες. Καλή φάση.

Ναι, αν ο χρήστης έχει αρχαίο υπολογιστή και έχει απενεργοποιήσει και τα Scripts έχασε. Τι να κάνουμε. Συνήθως όμως δεν είναι έτσι.

Αυτά φίλοι μου. Εύχομαι να βοήθησα κάποιον συνάδελφο.

Please Share

Δείτε περισσότερα..

Post Photo

Ένα ευχαριστώ στον Kevin Powell για τα καταπληκτικά του βίντεο σε ό,τι αφορά το CSS

Ο Kevin Powell έχει ένα κανάλι στο YouTube με 159.000 συνδρομητές και στόχος του είναι όπως λέει ο ίδιος να βοηθήσει τους θεατές του να κάνουν το διαδίκτυο λίγο πιο θαυμάσιο (a bit more awesome)

Κώδικας
tom
Thursday, 10 September 2020
Post Photo

Μετά από μια δεκαετία σταμάτησα να γράφω κώδικα με το jQuery. Τέλος εποχής

Χιλιάδες γραμμές κώδικα. Αναβαθμίσεις, ασυμβατότητες, προβλήματα και πονοκέφαλοι. Όλα αυτά για να έχω κάποια λειτουργικότητα Javascript στα project μου. Τέλος εποχής σήμερα

Κώδικας
tom
Tuesday, 01 September 2020
Post Photo

Τελικά τα κατάφερα. Η σελίδα παίζει με WebP

Δεν ήταν εύκολο. Από το πρωί δεν γνωρίζω ούτε ο ίδιος πόσες συναρτήσεις έχω γράψει ή ξαναγράψει. Μετά από 10 χρόνια που βγήκε το νέο πρότυπο εικόνας μπορώ επιτέλους να το χρησιμοποιήσω

Κώδικας
tom
Tuesday, 22 September 2020
Post Photo

Οι συγγραφείς της σελίδας είναι εδώ και καιρό δυο. Πως τους ξεχωρίζω;

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

Κώδικας
tom
Sunday, 16 August 2020
Post Photo

VerdinCMS έκδοση 7.18. Σιγά-σιγά το σύστημα κάνει όλα αυτά που θέλω

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

Κώδικας
tom
Friday, 09 October 2020
Post Photo

Άλλο ένα πρωινό με ασυμβατότητες και debugging

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

Κώδικας
tom
Tuesday, 25 August 2020