Par , le 30 janvier 2015

Responsive multi-resolution : CSS et « Hairlines » Borders Retina

Développement | 0

Au commencement, il n’y avait rien.

Et puis un jour Apple a décidé de rendre nos écrans plus précis avec le Retina.
Pour la taille d’un seul pixel nous en aurons désormais 4. Globalement, prenez 1 pixel d’un vieux device Apple, subdivisez le par 4 et vous aurez du Retina.

En 2013, un projet d’application hybride sous i0S7 et Android m’a plongé dans la réalité du responsive multi-résolution.
Mais en tant que front-end « méticuleux » cette histoire de retina posait problème, puisque tout ce qui avait 1px dans mes déclarations css aurait rendu au minimum 2px sur écran Retina.

retina-ratio-pixels

Facile, on va mettre :

retina-border-1

Eh bien non. Sous iOS7 (et dessous), pour toute déclaration en dessous de 1px le navigateur ne comprendra pas. Vous verrez à la place l’équivalent d’un 0px.

La solution

Pour rendre 1px réel sur ce type d’écran, pas mal de solutions ont vu le jour. Avec par exemple un gif de 2px de hauteur dont 1px est transparent (pas top pour ré-utiliser avec une autre couleur, ou une autre position). Il y a aussi avec un background: linear-gradient(), ou encore transform: scale() (imaginez la taille de votre css finale avec tous les préfixes vendor !)

La seule solution qui avait retenu mon attention était celle de Thomas Fuchs : transformer le border en background-image et y appeler une image svg.

Le svg est vectoriel et donc accepte les valeurs décimales, et le background-size n’a donc pas besoin d’être spécifié (contrairement au gif).

retina-border-2

Ce qui nous donne :

svg-render

Il faut prendre en compte que le pixel créé se repète en fonction de l’emplacement qu’on veut lui donner.

Pourquoi j’ai choisi cette solution :

  • Le vectoriel est scalable
  • C’est créé à la volée
  • Ré-utilisable, il suffit de changer le fill pour la couleur, et le x et y pour la position du rectangle dans le svg.

Automatiser

Sass peut vous sauver la vie pour ce genre de chose.
Voici un petit mixin Sass que j’ai créé pour utiliser facilement la technique proposée au dessus.

retina-border-3

C’est simple, je souhaite appliquer un border rouge de 0.5px sur le bas de l’élément.
Grâce au mixin, on peut écrire ça :

retina-border-4

La fonction s’occupe du reste.
Si on souhaite plusieurs bordures avec différentes couleurs :

retina-border-5

Bien entendu, ça fonctionne aussi avec vos propres variables. La seule chose à respecter, c’est de mettre la position avant la couleur. Pour les positions, on utilise les basiques de la CSS : top, bottom, left, right.

On peut créer ce genre de chose en moins de 3 minutes :

retina-render

La nouvelle solution « officielle »

L’arrivée de iOS8 et Yosemite introduit le support de fraction de pixel. Mais comme toutes nouvelles propriétés et attributs, cela restera visible d’une petite partie de votre audience (celle qui reste à jour).

La bonne nouvelle c’est que contrairement aux « anciennes » techniques, cette propriété peut s’appliquer à un élément ayant un border-radius. Pratique pour les boutons par exemple.

retina-border-6

On peut déjà commencer à l’utiliser, mais je vous recommande également d’utiliser ce mixin en tant que fall-back, en détectant l’OS de l’utilisateur.

Partager l'article :

Vous souhaitez réagir ?

En soumettant ce commentaire vous donnez à Silicon Salad le droit de citer vos propos ainsi que votre nom/site. Tous commentaires dégradants ou hors-sujet peuvent-être supprimés par décision de l’auteur. Votre e-mail, ne sert qu’à des fins d’authentification, il ne peut-être ni partagé ni diffusé.
Vous pouvez commenter avec la syntaxe Markdown. En savoir plus

Article précédent
Solution pour écrire de meilleurs contrôleurs : Decent Exposure