cross browser compatibility/development συζητηση/αποριες.

[Ruhl]

Θελω να ανοιξω το τοπικ να μαζεψουμε καπως αυτα που χρειαζοντε , η τι προσεγγιση χρησιμοποιειται εσεις , αν τα κατω ειναι σωστα η περισσευουν η λυπει κατι.

Και δεν ξερω κατα ποσο χρειαζοντε και καποια εφοσον κανω χρηση Bootstrap.

 

 

Οποτε:

reset την css

με meyer.sass + normalize.css 

 

https://github.com/TheJaredWilcurt/meyer-sass/blob/master/_meyer.sass

 

https://necolas.github.io/normalize.css/7.0.0/normalize.css

 

επισης στα παραπανω εχει στο normalize

legend{
box-sizing: border-box;

[type="checkbox"],
[type="radio"] {
box-sizing: border-box;

ειναι λαθος να βαλω εξρα αυτο η δεν χρειαζεται?

   *{ 
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }

 

 

 

Autoprefixer για CSS3 -webkit- -moz- -ms- -o-

για τα MEDIA QUERY: Respond.js η  Modernizr, η adaptive.960.js 

 

 

και δεν ειμαι σιγουρος αν χρειαζεται και Picturefill για τα picture element, srcset and sizes attributes?

https://scottjehl.github.io/picturefill/

 

και για IE CSS3 ???

http://fetchak.com/ie-css3/ie-css3.htc

 

 

 

 

 

Να κανεις target συγκεκριμενους browser στην CSS 

για firefox:

@-moz-document url-prefix() { /*code*/ }

 

 

για ΙΕ:

<!--[if IE]>

/*code*/

<![endif]-->

 

και το default οταν γραφεις στην css ειναι για chrome

 

 

 

 

Validate την HTML και CSS στο W3C

Για να μην εχεις κανενα λαθος γενικα.

https://validator.w3.org/
https://jigsaw.w3.org/css-validator/#validate_by_input

 

 

 

Βλεπω τα support στο https://caniuse.com/

 

 

 

 

Testing  δεν εχω κατι υποψην δεν ξερω τι χρησιμοποιουν, περα απο το να τα δοκιμασω ο ιδιος στους γνωστους browsers και κανενα android κινητο.

Αν εχετε να προτινεται κατι που χρησιμοποιουν στην πλειοψηφια εταιριες θα ημουν ευγνωμων.

[vadou]

To meyer δεν το ήξερα, αλλά βλέποντας τα styles του, δε θα το χρησιμοποιούσα ποτέ. Το normalize φτάνει και περισσεύει αλλά νομίζω ότι το bootstrap το περιέχει (παλιότερα τουλάχιστον το έκανε, δεν ξέρω τι παίζει με το v4).

 

autoprefixer: αν και γενικώς όσο περνάει ο καιρός, τόσο λιγότερα vendor prefixes χρειάζονται, καλό είναι να το έχεις

respond.js: άχρηστο, εκτός και αν έχεις σκοπό να υποστηρίξεις IE6-8

modernizr: χρειάζεται όταν χρησιμοποιείς bleeding edge tech για τους προχώ browsers και θες να χρησιμοποιήσεις τα  απαραίτητα polyfills για τους υπόλοιπους

adaptive.js: άν έχεις κάνει τόσο τρελό optimization και το μόνο που σε βαραίνει είναι τα πολύ μεγάλα css σου, τότε βάλε και ένα τέτοιο, αλλιώς άχρηστο. (Επίσης έχω την εντύπωση ότι μπορείς να κάνεις το ίδιο πράγμα και χωρίς js απλά έχω κολλήσει τώρα και δε θυμάμαι πως. Το βρήκα: https://css-tricks.com/resolution-specific-stylesheets/ )

 

"Να κανεις target συγκεκριμενους browser στην CSS": δεν έχω χρησιμοποιήσει ποτέ ανάλογα hacks και δε θα τα πρότεινα. Γράφε σωστά styles που να παίζουν παντού και αν κάποιος browser δεν έχει το απαραίτητο functionality -> polyfills

 

τα παρακάτω όπως τα λες. validate, caniuse και manual cross browser testing

[XPHSTOS_]

1) To Boostratp χρησιμοποιεί το normalize και δεν χρειάζεται να το περάσεις εσύ επιπλέον.

2) Γενικά τον selector * να τον αποφεύγεις γιατί είναι intensive για τον browser.
Ειδικά αν περνάς και τίποτα transitions.
To box-sizing καλό είναι να το χρησιμοποιείς όταν χρειάζεσαι.
Αν χρησιμοποιείς το bootstrap, τότε σίγουρα δεν χρειάζεσαι το box-sizing, εκτός αν γράφεις και δικό σου layout.

3) Το Bootstrap έχει δικά του "standard" media queries τα οποία καλύπτουν μια ευρεία γκάμα συσκευών.
Ειδικά αν στοχεύεις σε adaptive layout και όχι ρε fluid layout.
Αν θέλεις fluid, μπορείς πάλι να μείνεις στα default του bootstrap και να γράψεις εξτρά τα δικά σου.
3α) Τα breakpoints γίνονται ακόμη πιο εύκολα αν χρησιμοποιείς κάποιο CSS Preprocessor όπως SASS ή το αγαπημένο μου Stylus μαζί με Rupture (plugin)

4) Srcset attributes, SVGs, και ότι άλλο μοντέρνο μπορείς να φανταστείς και δεν το υποστηρίζει ο αρχαίος IE, και... πολύ σημαντικό, πρέπει να το υποστηρίξεις... modernizr και καθάρισες.
Πάντα διαλέγεις τι θα χρησιμοποιήσεις και δεν το φορτώνεις ολόκληρο, αλλιώς έχεις ένα modernizr τέρας και θα επιβαρύνεις το performance στην σελίδα σου.

5) Το IE Shiv ορθώς το χρησιμοποιείς για να κάνεις target τον IE, εάν και εφόσον χρειάζεται.
Για Chrome και Firefox, είναι καλύτερα απλά να παίξεις με fallbacks ή με @supports.

6) W3C Validator, σωστός, κυρίως για τα accessibility errors το χρησιμοποιώ.

7) Υπάρχουν 2 CLI plugins από NPM.
Το 1ο λέγεται caniuse και στην ουσία απλά γράφεις πχ. caniuse flexbox και σου βγάζει στην κονσόλα τα αποτελέσματα του caniuse.
Το βρίσκω απλά πιο γρήγορο από το να τρέχω κάθε φορά στο caniuse και πιο ελαφρύ από το να έχω ένα tab μονίμως ανοικτό.
Το 2ο λέγεται doiuse και όπως μπορείτε να μαντέψετε, λειτουργεί παρόμοια με το 1ο με την εξής διαφορά.
Του δίνεις ένα CSS αρχείο ως input καθώς και ποιους browsers θέλεις να ελέγξει (autoprefixer style) και το pars-άρει ολόκληρο γράφοντας σου στην οθόνη ή σε ένα JSON αρχείο... όλα αυτά τα properties τα οποία έχεις χρησιμοποιήσει και τα οποία δεν υποστηρίζονται από τους browsers που τους δηλώσαμε.
Φανταστικό εργαλείο!

8) Τέλος, οι μεγάλες εταιρείες ή οι σοβαρές αν προτιμάς έχουν account σε site όπως το cross browser testing ή το browser stack.
Είναι μεγάλο το μηνιαίο ποσό, αλλά έχεις σοβαρό emulation σε για όλες τις εκδόσεις browser για όλα τα λειτουργικά.
Οπότε έχεις λύσει το πρόβλημα σου αν παίζει καλά σε όλες τις συσκευές.
Εναλλακτικά, υπάρχει και η λύση του device panel, κάτι το οποίο μπορείς να το χτίσεις σιγά σιγά.
Φυσικά αναφέρομαι σε ένα panel στο οποίο θα έχεις όλες τις συσκευές που σε ενδιαφέρουν και μπορείς να βρεις.
Δηλαδή δεν πετάς τίποτα από παλιά κινητά, tablets, laptops κλπ. και έχεις φυσικές συσκευές για να κάνεις τα test σου.
Αν μπορείς να βρεις μεταχειρισμένες συσκευές σε καλές τιμές δεν θα σου βγει και ιδιαίτερα ακριβό.
Προφανώς και δεν θα έχεις ότι συσκευή έχει υπάρξει ποτέ, αλλά τις πιο γνωστές ή 1-2 από κάθε ανάλυση και πλατφόρμα.
Αυτό, σε συνδυασμό με browser sync είναι απόλαυση!
Μια φορά είχα την τύχη κάτι τέτοιο από κοντά και είναι ψαρωτικό τέρμα.

[Ruhl]

Ευχαριστω πολυ για τα σχολια παιδια , ακομα μαθαινω και οντως δικαιο εχετε ανοιξα  το bootstrap και εκει μεσα ειναι το normalize ηδη πατησα καποια delete λογω DRY

[Jordan95]

Καλησπερα σας,

Ξεθαβω αυτο το οχι και τοσο παλιο θεμα για να ρωτησω, εν ετει 2019, ποια εργαλεια χρησιμοποιειτε για να τεσταρετε τον τροπο με τον οποιο εμφανιζεται η σελιδα σας στους διαφορους browsers;

Κυκλοφορουν καποια εργαλεια, π.χ. BrowserStack, LambdaTest, τα οποια δεν ειναι δωρεαν και η δωρεαν εκδοση στις περισσοτερες περιπτωσεις δεν κανει και την καλυτερη δουλεια.

Θα ηθελα να ακουσω καποιες γνωμες, ενδιαφερομαι κυριως για το πώς μπορω να τεσταρω για Safari (Mac, iPhone, iPad) απο τη στιγμη που δεν εχω καποια απο τις παραπανω συσκευες.

Ευχαριστω.

[Επισκέπτης]

Χρησιμοποιώ το BrowserStack και είμαι απόλυτα ικανοποιημένος.

Δεν νομίζω ότι μπορείς να βρεις κάτι αξιόλογο δωρεάν, καθώς το κόστος για το στήσιμο μιας τέτοιας υπηρεσίας είναι πολύ υψηλό. Πρέπει να στηθούν VMs σε χιλιάδες διαφορετικά μηχανάκια, ειδικά με τα smartphones και τα tablets γίνεται της μουρλής.

Μπορείς να στήσεις κάποιον emulator στο PC σου και να βγάζεις screenshots από διαφορετικές αναλύσεις. Ας πούμε ότι είναι μια μεσοβέζικη λύση αν τα sites σου δεν είναι εμπορικά και δεν θες να δώσεις τα €300/έτος που κοστίζει το BrowserStack.

Επεξ/σία 28 Μαΐου 2019 από Επισκέπτης

[Jordan95]

Ευχαριστω για την απαντηση.

Τι ακριβως εννοεις οταν λες για Emulator; Μπορεις να γινεις πιο συγκεκριμενος;

Εννοεις κατι σαν το Blisk; Αν δεν κανω λαθος, με αυτο μπορεις να δεις πώς εμφανιζεται η σελιδα σου σε διαφορετικες αναλυσεις, αλλα π.χ. στα κινητα με Android ή στα Mac κλπ δε θα βλεπεις το σωστο αποτελεσμα, ετσι δεν ειναι;

[Επισκέπτης]

Εννοώ να τρέξεις κάποιον emulator από το PC σου κι από εκεί αλλάζοντας αναλύσεις κάθε φορά  σε διαφορετικούς browsers να δεις πως φαίνεται το site σου. Δεν είναι κάτι που το έχω κάνει οπότε δεν έχω εμπειρία. Αλλά είναι η μόνη εναλλακτική που μπορώ να φανταστώ αν δεν θες να πληρώσεις.