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

Προφανώς και αναφέρομαι στη δημιουργία ενός 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 έχασε. Τι να κάνουμε. Συνήθως όμως δεν είναι έτσι.

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