10 Χρήσιμες μεθόδους απόσβεσης για CSS και Javascript

Τα fallbacks κώδικα αποτελούν την ιδανική λύση για συμβιβασμούς με τους πολλούς μοναδικούς επισκέπτες σας. Όλοι όλοι στον ιστό δεν χρησιμοποιούν το ίδιο λειτουργικό σύστημα, πρόγραμμα περιήγησης ιστού ή ακόμα και φυσικό υλικό. Όλα αυτά τα στοιχεία για τον τρόπο με τον οποίο η ιστοσελίδα σας θα εμφανιστεί στην οθόνη. Όταν εργάζεστε με νέα κόλπα CSS ή JavaScript, συχνά θα συναντήσετε τέτοια τεχνικά σφάλματα.

Αλλά μην αφήνετε αυτές τις παγίδες να σας αποθαρρύνουν! Σε αυτόν τον οδηγό έχω βάλει μαζί μερικά από τα πιο συνηθισμένες εναλλακτικές τεχνικές για τους σχεδιαστές ιστοσελίδων που επικεντρώνονται σε CSS και JavaScript / jQuery. Όταν αποτύχουν όλα τα υπόλοιπα, θέλετε να παρέχετε στους χρήστες τουλάχιστον τη βασική λειτουργικότητα της σελίδας. Η απλότητα κυριαρχεί υπέρτατη στον τομέα της σχεδίασης της εμπειρίας των χρηστών.

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

1. Στρογγυλεμένες γωνίες με εικόνες

Οι τεχνικές CSS3 έχουν περάσει από τον ουρανό στο mainstream web design. Μία από τις πιο αξιοσημείωτες ιδιότητες είναι ακτίνα ακρόασης η οποία επιτρέπει στρογγυλεμένες γωνίες. Αυτά φαίνονται όμορφα σε σχεδόν οποιοδήποτε κουμπί, div ή πλαίσιο κειμένου. Το μόνο πρόβλημα είναι η περιορισμένη υποστήριξη μεταξύ των προγραμμάτων περιήγησης ιστού.

Πολλά παλαιότερα προγράμματα περιήγησης, συμπεριλαμβανομένου του Internet Explorer 7, δεν υποστηρίζουν αυτήν την ιδιότητα. Έτσι, για να διατηρήσετε στρογγυλεμένες γωνίες που λειτουργούν για όλα τα τυπικά προγράμματα περιήγησης, θα χρειαστεί να δημιουργήσετε μια εναλλακτική λύση με εικόνες.

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

#mainbox -webkit-ακτίνα-ακτίνα: 5px; / * Safari * / -moz-ακτίνα-ακτίνα: 5px; / * Firefox \ Gecko Κινητήρας * / -o-ακτίνα-ακτίνα: 5px; / * Όπερα * / ακτίνα-ακτίνα: 5px;  #mainbox .topc background: url ('corner-tl.png') δεν επαναλαμβάνεται στο πάνω αριστερό μέρος.  #mainbox .topc span φόντο: url ('corner-tr.png') όχι-επανάληψη πάνω δεξιά;  #mainbox .btmc background: διεύθυνση url ('corner-bl.png') no-repeat bottom left;  #mainbox .btmc span φόντο: url ('corner-br.png') χωρίς επανάληψη κάτω δεξιά?  

Για να σώσετε τον εαυτό σας από το άγχος προτείνω ιδιαίτερα τη χρήση μιας εφαρμογής όπως το RoundedCornr. Πρόκειται για μια εφαρμογή ιστού εντός του προγράμματος περιήγησης, η οποία παράγει στρογγυλεμένο CSS με χρήση CSS3 και εικόνων. Αυτό θα είναι ιδιαίτερα χρήσιμο για τους σχεδιαστές που δεν έχουν πρόσβαση σε λογισμικό γραφικών όπως το Photoshop ή το GIMP.

2. Σύστημα μενού αναπτυσσόμενων jQuery

Τα συστήματα μενού διαγραφής είναι ιδανικά για το σημερινό Web. Ωστόσο, το μεγαλύτερο πρόβλημα είναι η πρόσβαση των επισκεπτών στον ιστότοπό σας χωρίς την ενεργοποίηση του JavaScript. Σε αυτή την περίπτωση κανένα από τα μενού σας δεν θα λειτουργούσε καθόλου! Η καλύτερη λύση είναι να χρησιμοποιήσετε το CSS για να εμφανίσετε / αποκρύψετε κάθε μπλοκ div του υπομενού και να τα εμφανίσετε στην οθόνη.

Το μόνο πρόβλημα με αυτήν τη λύση είναι ότι ο Internet Explorer 6 δεν υποστηρίζει αυτούς τους επιλογείς δείκτη CSS. Ωστόσο, το IE7 + λειτουργεί εξαιρετικά. και φυσικά όλα τα προγράμματα περιήγησης θα λειτουργούν καλά αν ενεργοποιηθεί η JavaScript. Ο κώδικας από αυτό το σεμινάριο στο CSS Plus είναι ένας από τους καλύτερους πόρους που έχω βρει. Παρέχει όχι μόνο μια λύση με το jQuery αλλά και το CSS που είναι απαραίτητο για τα θέματα IE.

/ * Μια κλάση ρεύματος θα προστεθεί μέσω jQuery * / #nav li.current> a background: # f7f7f7;  / * Αντικατάσταση CSS * / #nav li: hover> ul.child εμφάνιση: μπλοκ;  #nav li: hover> ul.grandchild εμφάνιση: μπλοκ;  

Πηγή

Μια άλλη εναλλακτική λύση που μπορείτε να δοκιμάσετε είναι απλά η εμφάνιση κάθε μενού στο IE6. Μπορείτε να χρησιμοποιήσετε τα σχόλια υπό όρους του Internet Explorer για να εφαρμόσετε φύλλα στυλ με βάση την έκδοση του προγράμματος περιήγησης. Φυσικά, αυτό δεν θα είναι η ωραιότερη λύση, αλλά θα λειτουργήσει απλά.

Εάν δεν αισθάνεστε ότι ο Internet Explorer 6 προκαλεί μεγάλη ανησυχία τότε μην ασχοληθείτε με αυτή την εναλλακτική λύση. Το σεμινάριο και ο επόμενος κώδικας παραπάνω θα πρέπει να αρκούν για να φορτώσετε το μενού JavaScript, ακόμη και με αυστηρά CSS σε όλα τα μεγάλα προγράμματα περιήγησης.

3. Στοχευμένες μορφές Internet Explorer

Είμαι βέβαιος ότι όλοι γνωρίζουμε για τα ζητήματα απόδοσης που προέρχονται από τον Internet Explorer της Microsoft. Μπορώ να δώσω μια μικρή πίστωση για το τελευταίο IE8 και τις μελλοντικές προοπτικές τους με το IE9. Ωστόσο, υπάρχει ακόμη ένα μικρό κοινό που τρέχει το IE6 / IE7 και δεν μπορείτε πραγματικά να το αγνοήσετε ακόμα.

(Πηγή εικόνας: github)

Τα υπό συζήτηση σχόλια, όπως αναφέρονται στην τελευταία ενότητα, μπορεί να είναι χρήσιμα για την αναδιαμόρφωση των περιοχών της σελίδας. Για παράδειγμα, αν έχετε ένα αναπτυσσόμενο μενού με υπο-πλοήγηση στο IE6 που θα εμφανίζεται μόνο με τη χρήση JavaScript, θα έχετε την τύχη να δοκιμάσετε το CSS ως εναλλακτική μέθοδο. Αντ 'αυτού, η καλύτερη λύση είναι να εμφανίσετε κάθε υπο-λίστα ως μπλοκ πλοήγησης.

Με την προσθήκη του παραπάνω κώδικα στην κεφαλίδα του εγγράφου μπορείτε να ορίσετε τον τύπο οθόνης για κάθε υπο-πλοήγηση. Το καλύτερο μέρος για αυτό το εναλλακτικό είναι ότι μπορείτε να αντικαταστήσετε το CSS και ακόμα να εμφανίσετε / αποκρύψετε δυναμικά μενού όταν είναι ενεργοποιημένη η JavaScript. Διαφορετικά, θα εμφανιστεί μια ανοικτή λίστα συνδέσμων. Θα μπορούσατε να χρησιμοποιήσετε έναν παρόμοιο κώδικα με αυτόν που έχω προσθέσει παρακάτω.

#nav li θέση: σχετική; πλάτος: 150px; / * πρέπει να ορίσετε ένα πεπερασμένο πλάτος για IE * / #nav li ul / * κωδικοί υπο-ανοιχτού κώδικα * / display: block; θέση: απόλυτη; πλάτος: auto; / * ορίστε το δικό σας πλάτος ή το σύνολο στο στοιχείο li * / #nav li ul li πλάτος: 100%;  

4. Αδιαφάνεια / Διαφάνεια IE παλαιού τύπου

Ένα από τα πολλά ενοχλητικά σφάλματα με τον Internet Explorer είναι η αντιμετώπιση της αδιαφάνειας. Οι ρυθμίσεις alpha-διαφάνειας στο CSS3 μπορούν να τροποποιηθούν μέσω της ιδιότητας opacity. Ωστόσο, με τον τρόπο της Microsoft μόνο ο Internet Explorer 9 υποστηρίζει αυτή τη λειτουργία.

Η καλύτερη λύση για τη στόχευση του IE6 + είναι μέσω φίλτρο, μια ιδιόκτητη ρύθμιση που αναγνωρίζεται μόνο από την IE. Ελέγξτε το παρακάτω σύντομο παράδειγμα κώδικα:

.mydiv αδιαφάνεια: 0.55; / * CSS3 * / φίλτρο: άλφα (αδιαφάνεια = 55). / * IE6 + * / 

Το μόνο που χρειάζεται να κάνετε είναι να συμπεριλάβετε την παραπάνω γραμμή σε οποιοδήποτε στοιχείο που απαιτεί διαφάνεια. Παρατηρήστε ότι παρόμοια με την ιδιότητα CSS3, όλα τα υποκείμενα στοιχεία θα κληρονομούν αυτή την αλλαγή αδιαφάνειας. Αν ψάχνετε για μια νεότερη μέθοδο που στοχεύει ειδικά στο IE8, ελέγξτε τον παρακάτω κώδικα. Συμπεριφέρεται με τον ίδιο τρόπο που η ιδιότητα φίλτρου αναγνωρίζεται μόνο από τον αναλυτή του Microsoft IE8.

-ms-φίλτρο: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)". / * IE8 * / 

5. Δημιουργία κουμπιών CSS3 με εικόνες Fallback

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

Ωστόσο, δεν μπορείτε να εμπιστευτείτε ότι όλοι οι επισκέπτες σας θα είναι σε θέση να αποδώσουν αυτές τις νεότερες ιδιότητες. Όταν δημιουργείτε ένα εφεδρικό σχέδιο για κουμπιά (ή ακόμα και παρόμοια στοιχεία UI), υπάρχουν δύο ξεχωριστές επιλογές. Το πρώτο είναι να συμπεριλάβει μια εικόνα φόντου σχεδιασμένη ακριβώς όπως θα φαινόταν το CSS. Αυτό μπορεί να επιτευχθεί εύκολα στο Photoshop. Ωστόσο, εάν δεν είστε ειδικός στο λογισμικό, τότε αυτό μπορεί να είναι ενοχλητικό.

Η εναλλακτική λύση είναι να αντικαταστήσει ένα απλό χρώμα φόντου και απλούστερα στυλ CSS. Χρησιμοποιώ μερικά από τα παραδείγματα κώδικα από το CSS-Tricks για εξαιρετική δημοσίευση σε κλίσεις CSS3. Όλα τα μεγάλα προγράμματα περιήγησης, όπως το Safari, το Firefox, το Chrome και ακόμη και το Opera, υποστηρίζουν αυτές τις ιδιότητες. Η περιοχή όπου θα συναντήσετε ζητήματα είναι στην υποστήριξη των προγραμμάτων περιήγησης παλαιού τύπου: παλαιότεροι μηχανισμοί Mozilla, IE6 / 7, πιθανώς ακόμη και κινητό Safari.

.κλίση-bg χρώμα-φόντου: # 1a82f7; / * χρησιμοποιεί ένα στερεό χρώμα στο χειρότερο * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); εικόνα-φόντου: -webkit-gradient (γραμμική, 0% 0%, 0% 100%, από (# 2F2727) έως (# 1a82f7)). εικόνα-φόντου: -webkit-γραμμική κλίση (κορυφή, # 2F2727, # 1a82f7); εικόνα φόντου: -moz-γραμμική-κλίση (κορυφή, # 2F2727, # 1a82f7); εικόνα-φόντου: -ms-γραμμική κλίση (κορυφή, # 2F2727, # 1a82f7); εικόνα-φόντου: -ο-γραμμική-κλίση (κορυφή, # 2F2727, # 1a82f7);  

Πηγή

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

6. Έλεγχος για περιεχόμενο για κινητά

Μια άλλη τεράστια τάση το 2012 είναι η δημοτικότητα της περιήγησης στο Internet μέσω κινητού τηλεφώνου. Τα smartphones είναι παντού και τα δεδομένα μέσω 3G / Wi-Fi γίνονται ολοένα και πιο προσιτά. Έτσι, πολλοί σχεδιαστές θα προσπαθήσουν να παράσχουν μια εφεδρική διάταξη για τους χρήστες κινητών τηλεφώνων.

Μερικά δημοφιλή προγράμματα περιήγησης ιστού για κινητά θα κάνουν τις σελίδες παρόμοιες με ένα περιβάλλον επιφάνειας εργασίας. Το Mobile Safari και η Opera είναι πιο γνωστά για αυτό, υποστηρίζοντας ακόμη και πολλά κοινά σενάρια jQuery. Αλλά αυτές οι σελίδες δεν είναι πάντα φιλικές προς το κινητό και υπάρχει χώρος για επέκταση στο UX.

Υπάρχουν δύο τρόποι με τους οποίους μπορείτε να ανιχνεύσετε προγράμματα περιήγησης για κινητά και να εμφανίσετε μια εναλλακτική διάταξη ή φύλλο στυλ. Το πρώτο είναι μέσω του JavaScript, το οποίο λειτουργεί πολύ σαν εργαλείο frontend. Η δέσμη ενεργειών που έχω προσθέσει παρακάτω είναι πολύ απλή και ελέγχει μόνο τους χρήστες iPhone / iPod Touch. Το Detect Mobile Browsers είναι μια φανταστική ιστοσελίδα που προσφέρει ένα λεπτομερέστερο σενάριο που μπορείτε να τρέξετε αντ 'αυτού.

// Ανακατεύθυνση λειτουργίας iPhone / iPod Touch isiPhone () επιστροφή ((navigator.platform.indexOf ("iPhone")! = -1) || ("iPod")! = -1));  αν (isiPhone ()) window.location = "m.yourdomain.com";  

Τώρα η άλλη εναλλακτική λύση ελέγχει μέσω μιας γλώσσας backend όπως PHP. Μπορείτε να ελέγξετε για μια μεταβλητή γνωστή ως HTTP_USER_AGENT. Δεκάδες δικτυακοί τόποι θα εμφανιστούν αν έχετε αυτούς τους όρους της Google. Ωστόσο, εξακολουθώ να προτείνω τη σύνδεση Detect Mobile Browsers που πρόσθεσα στην προηγούμενη παράγραφο.

Ο ιστότοπος έχει δωρεάν downloadable scripts για αναλύσεις όχι μόνο στην PHP, αλλά και σε τόνους άλλων δημοφιλών γλωσσών backend. Αυτά περιλαμβάνουν το ASP.NET, το ColdFusion, το Rails, το Perl, το Python και ακόμη και το βασισμένο στον διακομιστή κώδικα όπως το IIS και το Apache.

7. Sliderbox Slider με χαριτωμένο Fallback

Το αγαπημένο μου CSS3 freebie από το 2011 πιθανότατα πρέπει να είναι το Slicebox 3D Slider Slider που κυκλοφορεί από την Codrops. Χρησιμοποιεί όμορφες μεταβάσεις κινήσεων CSS στα προγράμματα περιήγησης που τα υποστηρίζουν, αυτήν τη στιγμή στο Google Chrome και το τελευταίο στο Safari. Είναι παράξενο που ακόμη και η πιο πρόσφατη έκδοση Firefox ή IE9 δεν μπορεί να χρησιμοποιήσει αυτές τις μεταβάσεις.

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

Εναλλακτικά, η Codrops μόλις πρόσφατα κυκλοφόρησε ένα άλλο πάνελ ολίσθησης που χρησιμοποιεί ακόμα πιο δημιουργικές τεχνικές CSS3. Αυτός ο ρυθμιστής εικόνας δημιουργείται χρησιμοποιώντας εικόνες φόντου σε CSS, οπότε και χωρίς τα εφέ μετάβασης συμπεριφέρεται πολύ ομαλά.

8. Μέθοδος Failsafe του CDQ jQuery Script

Η βιβλιοθήκη jQuery έχει καταστεί σχεδόν απαραίτητη για την ανάπτυξη JavaScript στο διαδίκτυο. Πολλοί εναλλακτικοί προμηθευτές CDN δημιούργησαν στατικά URL όπου φιλοξενούν όλες τις εκδόσεις του jQuery. Η Google, η Microsoft και ακόμη και η ίδια η jQuery δημιούργησαν μια πύλη CDN για προγραμματιστές, μεταξύ μερικών άλλων λιγότερο γνωστών ιστοτόπων.

Υπάρχουν πιθανώς εκατοντάδες χιλιάδες προγραμματιστές που εξαρτώνται από αυτούς τους παρόχους. Τι θα συνέβαινε εάν κάποιος από τους συνδέσμους είχε σπάσει για οποιονδήποτε λόγο ή οι διακομιστές παρέμειναν εκτός σύνδεσης; Θα ήταν καλή ιδέα να φιλοξενήσετε ένα τοπικό αντίγραφο και να το εφαρμόσετε μόνο αν το χρειαστείτε. Λοιπόν αυτό το υπέροχο απόσπασμα κώδικα από το CSS-Tricks σάς επιτρέπει να το κάνετε ακριβώς αυτό!

Πηγή

9. Μοναδικά πλαίσια ελέγχου HTML5

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

Έτρεξα σε αυτό το υπέροχο φροντιστήριο CSS / jQuery που δημοσιεύτηκε στις αρχές της άνοιξης του 2011. Προσφέρει μια απλή μέθοδο δημιουργίας διακόπτων τύπου Apple για τα κουτάκια σας, τα οποία υποβαθμίζονται χαριτωμένα σε παλαιότερα προγράμματα περιήγησης. Ο κώδικας χρησιμοποιεί εικόνες φόντου για να αντικαταστήσει τα στυλ on / off μεταξύ των αλληλεπιδράσεων των χρηστών.

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

Υποθέτοντας ότι το JavaScript είναι απενεργοποιημένο ή δεν υποστηρίζεται σε παλαιότερα προγράμματα περιήγησης, το σενάριο θα προεπιλογή στις κανονικές εισόδους HTML. Αυτό θα απενεργοποιήσει επίσης το CSS για τα πιο πρόσφατα στυλ πλαισίου ελέγχου, ώστε να φαίνεται σαν να μην έχει αλλάξει τίποτα. Το σενάριο συμπεριφέρεται περισσότερο σαν μια αισθητική μπροστά-δρομέας με ένα καθαρό fallback από οτιδήποτε άλλο. Αλλά αυτά τα ρυθμιστικά φαίνονται φανταστικά και οι ίδιες τεχνικές θα μπορούσαν να εφαρμοστούν σε άλλα πεδία εισαγωγής φόρμας όπως τα μενού επιλογών και τα κουμπιά επιλογής.

10. Υποστηριζόμενα βίντεο HTML5

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

Το Mozilla Firefox υποστηρίζει γενικά το βίντεο .OGG το οποίο μπορείτε να χρησιμοποιήσετε ως μετατροπέα VLC. Το Google Chrome & το Safari αναζητούν αρχεία .MOV που έχουν κωδικοποιηθεί με .MP4 ή H.264. Λόγω αυτών των διαφορών θα πρέπει κανονικά να συμπεριλάβετε τρία διαφορετικές μορφές βίντεο - οι δύο παραπάνω, μαζί με ένα .FLV fallback.

Ευτυχώς μερικοί πραγματικά έξυπνοι τύποι έβαλαν μαζί μια βιβλιοθήκη που ονομάζεται VideoJS. Είναι μια εξαιρετικά μικρή έκδοση JavaScript που επιτρέπει την ενιαία υλοποίηση του βίντεο Flash και HTML5 σε μία ετικέτα. Είναι δωρεάν για λήψη και ανοικτού κώδικα, έτσι οι προγραμματιστές είναι ευπρόσδεκτοι να συμβάλουν επίσης. Και οι δύο συσκευές αναπαραγωγής βίντεο Flash και HTML5 είναι προσαρμοσμένες ώστε να είναι ίδιες, έτσι ώστε όλοι οι χρήστες να έχουν την ίδια εμπειρία. Ανατρέξτε στο παράδειγμα κώδικα ενσωμάτωσης βίντεο HTML5:

Πηγή

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

συμπέρασμα

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

Ωστόσο, οι τάσεις δείχνουν ότι πλησιάζουμε σε μια πιο εποικοδομητική εποχή στον σχεδιασμό ιστοσελίδων. Ποτέ πριν δεν συμφωνήσαμε περισσότερα προγράμματα περιήγησης και πρότυπα ιστού, ειδικά στο CSS3 & HTML5. Αυτές οι τεχνικές είναι μόνο μερικές από τις πολλές που πρέπει να λάβετε υπόψη όταν δημιουργείτε ιστοσελίδες συμβατές με τα πρότυπα. Ως προγραμματιστής ιστού, θα θέλετε συνεχώς να ακολουθείτε τις τελευταίες τάσεις σχεδίασης και να προσαρμόζετε καλύτερα στο κοινό σας.