Οδηγός Modernizr (Cheat Sheet)

[!NOTE] Σημείωση σύγχρονου ιστού: Το Modernizr ήταν απαραίτητο κατά τη μετάβαση σε HTML5 και CSS3. Σήμερα προτιμάται το @supports στο CSS και άμεσοι έλεγχοι API ('fetch' in window) στη JavaScript.

Το Modernizr ανιχνεύει τη διαθεσιμότητα σύγχρονων δυνατοτήτων HTML5 και CSS3 στον browser του χρήστη, αντικαθιστώντας τον εύθραυστο έλεγχο user-agent.

Πώς λειτουργεί το Modernizr

Κατά τη φόρτωση, εκτελεί δοκιμές δυνατοτήτων και:

1. Προσθέτει κλάσεις όπως .flexbox ή .no-flexbox στο ριζικό στοιχείο <html>.
2. Εκθέτει ένα καθολικό αντικείμενο JavaScript Modernizr με λογικές ιδιότητες δοκιμών.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

---

Υπό όρους μορφοποίηση σε CSS

Στοχεύστε υποστηριζόμενους και μη υποστηριζόμενους browsers απευθείας στο CSS:

/* Fallback layout for older browsers */
.no-flexbox .container {
  display: block;
  float: left;
}

/* Modern flexbox layout */
.flexbox .container {
  display: flex;
  justify-content: space-between;
}

---

Ανίχνευση δυνατοτήτων σε JavaScript

if (Modernizr.geolocation) {
  navigator.geolocation.getCurrentPosition(showMap);
} else {
  showAddressInputFallback();
}

if (Modernizr.localstorage) {
  localStorage.setItem('theme', 'dark');
}

if (Modernizr.webgl) {
  initialize3DCanvas();
}

---

Συνήθεις ανιχνεύσιμες δυνατότητες

Δυνατότητες CSS

• flexbox, cssgrid
• opacity, rgba, hsla
• boxshadow, textshadow, borderradius
• cssanimations, csstransforms, csstransforms3d, csstransitions
• backgroundsize, borderimage, fontface

APIs HTML5 & Αποθήκευσης

• canvas, canvastext, webgl
• localstorage, sessionstorage, indexeddb
• geolocation, history, websockets, webworkers
• video, audio, svg, inlinesvg

---

Αναφορές

• Επίσημη τεκμηρίωση Modernizr
• MDN: Χρήση ανίχνευσης δυνατοτήτων