J'ai découvert un peu par hasard que Firefox simule le rendu d'un écran à haute densité de pixels — ou retina — lorsqu'un certain niveau de zoom est atteint (apparemment, c'est 150%. Soit 4x le zoom normal.)

Cela va donc reproduire le rendu flou des images (sauf si vous utilisez du SVG ou une icon-font), mais cela peut aussi déclencher les media queries correspondantes.

Par exemple, la media query suivante se déclenche en zoomant sur Firefox :

@media (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 144dpi),
    (min-resolution: 1.5dppx) {
            // Vos styles retina
}

Voir la démo (ctrl++ pour déclencher le zoom)

Cela peut s'avérer pratique si vous devez tester rapidement le bon fonctionnement d'un fix pour écran retina sans avoir l'appareil adéquat sous la main.

Au niveau compatibilité, j'ai noté que cette fonctionnalité était aussi présente sur Chrome (attention, il faut rafraichir la page pour déclencher la media query) et Internet Explorer.

Récemment, lors de la refonte d'un vieux projet, j'ai décidé de mettre à jour jQuery.
Le projet datait d'il y a plus de 2 ans et avait pas mal de versions de retard, donc il était temps de repartir sur une base saine avec jQuery 1.9.

J'ai malheureusement eu la désagréable surprise de découvrir qu'il y avait certains changements dans l'API de jQuery UI, notamment sur le widget « Accordion » avec la disparition pure et simple de l’option navigation qui permettait d’ouvrir la partie de l’ « accordion » comprenant un lien vers la page actuelle.

Ça pouvait notamment être très utile en utilisant des #mots-clés en fin d’URL pour ouvrir les différents éléments de l’ « accordion ».

J’ai donc cherché sur Internet une alternative à cette option, en accord avec la nouvelle API ; mais mes recherches se sont avérées infructueuses, donc j’ai retroussé mes manches et voici la solution !

Tout d’abord le HTML :

<div id="accordion">
    <h2><a href="#accordeon1">Titre 1</a></h2>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
    <h2><a href="#accordeon2">Titre 2</a></h2>
    <div><p>Pellentesque lectus tellus, ullamcorper vitae leo ut, egestas tristique mi.</p></div>
    <h2><a href="#accordeon3">Titre 3</a></h2>
    <div><p>Maecenas neque nibh, porta sit amet pulvinar eu, porta nec enim. Nulla et laoreet ipsum.</p></div>
</div>

Ici, le lien est situé au niveau du header mais ça peut aussi marcher avec un lien dans le contenu.

Et pour le JS :

// On récupère l’URL de la page actuelle. 
// Ici c'est un hash car on reste sur la même URL, mais si vous utilisez une URL différente pour chaque élément, vous pouvez utiliser `window.location.pathname` par exemple
var current = window.location.hash; 

// On cherche si il y a un lien qui correspond à l'URL de la page, puis on récupère son parent. Le parent doit être le premier descendant de l'accordéon, ici c'est un `H2`.
var findToggler = $('#accordion a[href$="' + current +'"]').parent('h2');

var indexToggler;
if(findToggler.length) { // Si on a trouvé un élément correspondant
    indexToggler = findToggler.index('h2'); // On récupère son index - l'index est indispensable pour définir l'onglet à ouvrir
} else {
    indexToggler = 0; // Si on est sur une autre page, on ouvre le premier onglet. On peut éventuellement en ouvrir aucun en utilisant `false`.
}
$('#accordion').accordion({
    heightStyle: "content", 
    active: indexToggler // On utilise la variable pour définir quel élément ouvrir.
});

Et voilà !

Update 10/09/2014 : Ajout des dimensions pour l'iPhone 6 et 6 Plus

Lorsque je dois intégrer un design responsive ou un site mobile, j'utilise le mode « vue adaptative » de Firefox (Outils > Développeur web > Vue adaptative).

Je le trouve plus pratique que les différents bookmarklets qu’on trouve un peu partout (ici, là ou encore là), mais dans l’absolu ils se valent tous plus ou moins.

Une chose qui fait cependant défaut à l’outil de Firefox, ce sont les tailles prédéfinies — les presets. On y retrouve en effet les résolutions les plus répandues sur le marché, sans plus d’indications, notamment sur la correspondance avec les appareils.

Qu’à cela ne tienne, étant donné que l’on peut créer et sauvegarder ses propres presets, je me suis attelé à ajouter les différentes résolutions du marché, en me basant sur le projet de Stefanie Hatcher, Mobile + Tablet devide dimensions.

Si ça vous intéresse, je vous donne la marche à suivre :

1. Dans le mode « vue adaptative », sélectionner une résolution et cliquer sur « Ajouter la préselection »
2. Ouvrir un nouvel onglet et taper about:config (n’allez pas y faire n’importe quoi par contre !)
3. Taper « preset » dans le moteur de recherche. Normalement, vous devriez voir apparaitre deux lignes :
   • devtools.responsiveUI.presets
   • devtools.responsiveUI.currentPreset
4. Ouvrir devtools.responsiveUI.presets et coller le code suivant :

[{"key":"266x533","name":"HTC EVO","width":266,"height":533},{"key":"320x480","name":"iPhone 3GS - 4 - 4S","width":320,"height":480},{"key":"320x533","name":"Galaxy SII - HTC Desire - Nokia Lumia 710","width":320,"height":533},{"key":"320x568","name":"iPhone 5","width":320,"height":568},{"key":"360x640","name":"Galaxy Note II - Galaxy SIII, SIV - HTC One","width":360,"height":640},{"key":"375x667","name":"iPhone 6","width":375,"height":667},{"key":"414x738","name":"iPhone 6 Plus","width":414,"height":738},{"key":"384x640","name":"Nexus 4 - Nokia Lumia 920 - BlackBerry Z10","width":384,"height":640},{"key":"400x640","name":"Galaxy Note","width":400,"height":640},{"key":"480x800","name":"Galaxy S","width":480,"height":800},{"key":"533x853","name":"Kindle Fire HD - Galaxy Tab","width":533,"height":853},{"key":"600x1024","name":"Galaxy Tab 1 & 2","width":600,"height":1024},{"key":"601x962","name":"Nexus 7","width":601,"height":962},{"key":"720x1280","name":"Surface Pro","width":720,"height":1280},{"key":"720x1366","name":"Surface","width":720,"height":1366},{"key":"768x1024","name":"iPad","width":768,"height":1024},{"key":"800x1280","name":"Kindle Fire HD 9 - Galaxy Note 10 - Galaxy Tab 2 10 - Nexus 10","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]

Attention, cette opération effacera les tailles existantes ! Donc si jamais vous en aviez ajouté, il faut les sauvegarder avant de coller ce code.

Ça vous est déjà probablement arrivé : déclencher par inadvertance le zoom de votre navigateur (ctrl+ ou ctrl-, ctrl+0 pour revenir à la normale) et ne même pas vous en rendre compte.

Je vois de plus en plus ce petit « accident » devenir la source de bugs relevés par les clients ou les équipes. Vous savez, ce bug qui n’arrive que chez la personne en question, semble bien réel, mais que vous n’arrivez pas à expliquer ou à reproduire.

Le zoom navigateur est assez traître, car il ne crée en général que des problèmes de mise en forme très localisés.
Pour le reste, le site apparait en plus gros dans son ensemble — un zoom, quoi — mais si vous n’avez pas la version originale pour comparer, il peut être difficile de s’en rendre compte.

Auparavant, on avait le cache du navigateur comme explications des différences entre le poste du client et le notre, maintenant il faudra aussi penser à vérifier si le zoom est activé !

Lea Verou a décidé de se pencher sur la question sur son blog en se basant sur les navigateurs qui supportent les dégradés sans préfixes et les statistiques d'utilisation de ceux qui les nécessitent.

TL;DR

• Le préfixe -ms- est tout à fait inutile car il n'a jamais été utilisé sur une version stable d'Internet Explorer.
• Le préfixe -moz- n'est plus nécessaire, sauf si vous souhaitez assurer le support pour les versions 3.6 à 16 de Firefox.
• Le préfixe -o- de même, sauf pour les versions antérieures à 12.10 (0,25% d'utilisateurs dans le monde)
• Le préfixe -webkit- est à conserver. Les dégradés non préfixés ne sont pas supportés par Safari, mais surtout par les navigateur mobiles utilisant WebKit (et ils sont nombreux).

Point important à retenir : n'oubliez pas d'ajouter une couleur de fond en fallback pour éviter les soucis !

Voici un article à lire absolument !

Un état des lieux du Responsive Webdesign qui met en lumière tous les points qu'il nous reste à améliorer, découvrir, finaliser.

D'abord publié sur Smashing Magazine, cet article titanesque a été traduit en français et publié sur AlsaCréations par son auteure, la webdesigner Stéphanie Walter.

Lire l'article