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

Χρόνος Ανάγνωσης: 5,6 λεπτά

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

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

Κοινοποίησε το άρθρο

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

Post Photo

Βρήκα με τι θα ασχοληθώ στο επόμενο διάστημα: tomsnews.social. Ένα κοινωνικό δίκτυο εμπνευσμένο από το παλιό τουίτερ

Η λογοκρισία όσο περνά ο καιρός χειροτερεύει. Κάθε φορά που ποστάρεις κάτι στην big tech δεν ξέρεις αν την άλλη μέρα θα έχεις το λογαριασμό σου.

tom
Κώδικας
Sunday, 30 May 2021
Post Photo

Μια συμβουλή για συναδέλφους και όχι μόνο. Κάντε ένα backup από οτιδήποτε έχετε online

Θα έχετε άφθονο χρόνο μετά να με ευχαριστείτε για την πράξη σας.

tom
Κώδικας
Monday, 11 January 2021
Post Photo

Τι έπρεπε να είχε κάνει ο Τραμπ για να μην τον απασχολεί η λογοκρισία των κοινωνικών δικτύων της Big Tech

Ο Τραμπ έκανε ένα τεράστιο λάθος. Δεν προετοιμάστηκε για τις περίεργες εποχές που ζούμε. Λάθος το οποίο δυστυχώς κάνουν πολλοί.

tom
Κώδικας
Saturday, 09 January 2021
Post Photo

Η σελίδα πλέον είναι πιο συμβατή με παλιούς browsers. Δεν γινόταν αλλιώς

Ένα μεγάλο μέρος του κοινού μου δεν έχει τη δυνατότητα να αγοράσει νέο υπολογιστή, κινητό ή tablet. Ένα δώρο του tomsnews χρονιάρα μέρα που είναι.

tom
Κώδικας
Thursday, 24 December 2020
Post Photo

Το tomsnews ανοίγει τις πόρτες του. Μέχρι δέκα συγγραφείς θα φιλοξενούνται στο σύστημα

Η σελίδα χθες παρά την κατήφεια που επικρατεί στο διαδίκτυο σημείωσε και πάλι ρεκόρ επισκέψεων από την ημέρα που εγκατέστησα την έκδοση VerdinCMS 10.

tom
Κώδικας
Saturday, 19 December 2020
Post Photo

Πάμε να φτιάξουμε το δικό μας κοινωνικό δίκτυο;

Οι φίλοι της σελίδας θα θυμούνται το mpoom.com το οποίο τα είχε πάει εξαιρετικά καλά. Το αγάπησαν φίλοι όσο το αγάπησα και γω. Μέχρι σήμερα με ρωτούν τι απέγινε και αν θα ξαναλειτουργήσει. Θα υπάρξει Mpoom 2;

tom
Κώδικας
Monday, 07 December 2020
Post Photo

25 χρόνια PHP. Ο δημιουργός της γλώσσας Rasmus Lerdorf μιλά για το παρελθόν, παρόν και μέλλον (βίντεο)

Μια εντυπωσιακή ομιλία-παρουσίαση του Rasmus Lerdorf για μια γλώσσα που χρησιμοποιήθηκε για τη δημιουργία τεράστιου μέρους του διαδικτύου που βλέπουμε σήμερα μπροστά μας. Tο Wordpress για παράδειγμα (που έχει γραφεί σε PHP) χρησιμοποιείται από το 60% των ιστοσελίδων παγκοσμίως.

tom
Κώδικας
Monday, 30 November 2020
Post Photo

Γιατί μια σελίδα με επαγγελματική εμφάνιση ή ένα βίντεο με άψογη ποιότητα ήχου και εικόνας απωθεί ένα μέρος του κοινού;

Δείχνει παράλογο. Λογικά όσο πιο καλαίσθητη μια σελίδα, όσο πιο επαγγελματική, όσο καλύτερο ένα βίντεο τόσο περισσότερο κοινό μαζεύουν. Λάθος; Δείτε γιατί.

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

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

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

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

Εκ της διευθύνσεως. Μπορείτε στις εικόνες μέσα στα άρθρα να κάνετε κλικ. Χρήσιμο όταν ποστάρω έγγραφα ή διαγράμματα

Οι εικόνες μέσα στα άρθρα διαθέτουν ζουμ πλέον. Παίρνετε το αγαπημένο σας ποντίκι και απλά κάνετε κλικ

tom
Κώδικας
Sunday, 27 September 2020
Post Photo

Linkpal - Μια σελίδα για φίλους προγραμματιστές. Συλλογή από links και online εργαλεία

Στη σελίδα αυτή μαζεύω πηγές, εργαλεία ή ό,τι άλλο βρω που με βοηθάει στη δουλειά μου

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

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

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

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

Η έκδοση 6 του VerdinCMS δεν υποστηρίζει πια Internet Explorer 11 και κάτω

Τέλος εποχής. Μετά από δεκαετίες μάχης με τον περιηγητή που η ίδια η Microsoft παράτησε σταματώ την υποστήριξή του. Η έκτη έκδοση του CMS που βλέπετε μπροστά σας δεν λειτουργεί πια σε IE 11 και κάτω

tom
Κώδικας
Saturday, 19 September 2020
Post Photo

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

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

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

Αν θέλεις να γίνεις προγραμματιστής και μάλιστα καλοπληρωμένος αυτή είναι η γλώσσα που πρέπει να μάθεις (βίντεο - μάθημα μιας ώρας)

Για να βρεις προγραμματιστή React είναι σαν να ψάχνεις ψύλλο στα άχυρα (Digital Knights ~ Trends for 2020)

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

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

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

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

VerdinCMS - Ένα Ελληνικό σύστημα διαχείρισης περιεχομένου που έρχεται να ταράξει τα νερά. Το βίντεο παρουσίασης που όλοι περίμεναν

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

tom
Κώδικας
Thursday, 27 August 2020
Post Photo

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

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

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

Σύντομο αρθράκι για συναδέλφους προγραμματιστές ή ανθρώπους που θα ήθελαν να γίνουν

Στο άρθρο αυτό ποστάρω ένα μάθημα μιας ώρας και σαράντα λεπτών από τον αγαπημένο μου "δάσκαλο" Traversy Media για Javascript ECMAScript 6 - 2015

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

Το tomsnews συμβατό πλέον και με Internet Explorer 10 και 11

Μια σύντομη ενημέρωση από τα κεντρικά

tom
Κώδικας
Wednesday, 19 August 2020
Post Photo

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

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

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

Ήταν δύσκολος ο τοκετός αλλά το μωρό είναι όμορφο

Τουλάχιστον έτσι νομίζω. Έτσι είναι αυτά. Μετά από 9 μήνες δημιουργείται μια νέα ζωή. Κάπως έτσι είναι τα πράγματα και στο λογισμικό.

tom
Κώδικας
Friday, 07 August 2020
Post Photo

Επιστροφή στην κανονική ροή του προγράμματος. Καλωσήρθες VerdinCMS 4!

Ίσως να μην το παρατηρήσατε (πως να το δείτε άλλωστε) αλλά το tomsnews τρέχει με την νέα έκδοση του VerdinCMS. Χάθηκα λίγο στον κώδικα για να ολοκληρώσω την τέταρτη έκδοση.

tom
Κώδικας
Wednesday, 16 October 2019
Post Photo

Μετασχηματίζοντας ένα blog σε πλατφόρμα ελεύθερης δημόσιας γραφής

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

tom
Κώδικας
Monday, 14 October 2019
Post Photo

Δημιουργώντας τη δική σου πλατφόρμα για μια κοινότητα ελεύθερων ανθρώπων

Υπάρχουν πολλά και διάφορα κοινωνικά δίκτυα στον πλανήτη. Ο όρος κοινωνικό δίκτυο συμπεριλαμβάνει πολλά πράγματα σήμερα. Π.χ το YouTube είναι κοινωνικό δίκτυο μιας και μπορείς να αλληλεπιδράς με το περιεχόμενο. Όλα όμως έχουν ένα πράγμα κοινό. Δεν σου ανήκουν. Τι γίνεται αν μια μέρα στο ξηλώσουν;

tom
Κώδικας
Monday, 07 October 2019
Post Photo

Μπορείτε πλέον να δείτε όλα τα άρθρα της σελίδας. Ναι, και τα παλιά!

Μου πήρε ένα διωράκι το πρωί. Τώρα θα δείτε στο τέλος της κεντρικής σελίδας τρία νέα κουμπιά.

tom
Κώδικας
Thursday, 03 October 2019
Post Photo

Η γιόγκα συνεχίζεται. Έχω να μοιραστώ μαζί σας έναν εντελώς καινοτόμο τρόπο διδασκαλίας

Είναι γνωστό ότι το tomsnews αποτελεί αστείρευτη πηγή γνώσης. Στα σεμινάρια που κάνω έχουμε πάλι νέο καθηγητή. Τους αλλάζουν σαν τα πουκάμισα. Μάλλον απασχολούν όποιον δουλεύει για πέντε ευρώ την ώρα.

tom
Κώδικας
Monday, 23 September 2019
Post Photo

Mouse mover. Η ποντικοκίνηση για τα σεμινάριά σας.

Στην περίπτωση που κάνετε σεμινάρια μέσω βίντεο (τηλεμάθηση) είναι σχεδόν βέβαιο ότι ο υπολογιστής σας παρακολουθείται. Ο απλούστερος τρόπος με τον οποίο προσπαθεί ο διαχειριστής του δικτύου να καταλάβει αν είστε στον υπολογιστή δεν είναι η κάμερα αλλά η κίνηση του ποντικιού.

tom
Κώδικας
Friday, 20 September 2019
Post Photo

Χάσαμε τον καθηγητή. Τα μεγαλεία συνεχίζονται.

Έπεσε η ροή βίντεο και μείναμε ορφανά. Κοιτιόμαστε περίεργα. Μάλλον θα κάηκε ο ρούτερ του. Μπορεί να κατέρρευσε η παγκόσμια οικονομία. Ίσως βομβάρδισαν το Βερολίνο οι σύμμαχοι. Ναι, σωστά δεν ζούμε στο 1945 οπότε μάλλον δεν έγινε αυτό. Μπορεί να ξέσπασε επιδημία με ζόμπια και έφαγαν τον καθηγητή. Και αυτό παίζει.

tom
Κώδικας
Tuesday, 17 September 2019
Post Photo

Πάρτε τους συνέντευξη όταν σας παίρνουν συνέντευξη για δουλειά. Το άρθρο αναφέρεται στην εύρεση εργασίας ως προγραμματιστή.

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

tom
Κώδικας
Thursday, 18 July 2019