[CSS] Un effet label/input avec icône et flexbox - Le Hollandais Volant

#16797

Je la repartage, parce que je suis tellement génial que je réutilise souvent mes propres astuces.

Mais aujourd’hui j’utilise plutôt les fonts avec les icônes dedans, et du coup ce n’est plus avec un background() mais avec content sur le ::before (du label). Mais le principe reste le même, c’est juste plus léger (les webfont contient des milliers d’icônes scallables là où un PNG en a 1 ou 2 pour le même poids).

https://lehollandaisvolant.net/?d=2015/07/17/23/46/32-css-un-effet-labelinput-avec-icone-et-flexbox

Discover the Power of CSS Transforms - Heart Internet Blog - Focusing on all aspects of the web

#16794

Transform + animation permettent de faire beaucoup de choses en CSS. Par contre, attention aux performances, en particulier sur mobile.

Pour les couleurs, n’oubliez pas non plus le "filter", qui permet de modifier les couleurs (contraste, luminosité, négatif…). J’utilise ça pour ici : https://lehollandaisvolant.net/tout/tools/toshop/

(Via les excellentes La Semaine en Pixel)

https://www.heartinternet.uk/blog/discover-the-power-of-css-transforms/

Screen.width - Référence Web API | MDN

#16753

screen.width

Permet de trouver la largeur de l’écran, en « pixel CSS » (d’après les spec).
Sauf que Firefox tient compte du ratio de zoom (si vous avez un zoom de 2, ou un pixel-ratio de 2, alors la largeur affichée sera divisée par 2).

Webkit en revanche, ne tient pas compte de ça…

Les specs disent que un pixel c’est 1/96 pouce. Un pouce ne variant pas, je pense que si le pixel-ratio est de deux, alors la valeur affichée par le navigateur doit être divisée par deux aussi. Donc un écran 4K en 15" qui est affiché en fHD (comme c’est le cas sur certains ordinateurs portables) devrait retourner une valeur de 1920×1080, pour conserver le fait que 96 px en CSS corresponde à 1 inch.

C’est ensuite au script lui-même de prévoir ce cas là et de faire une multiplication avec le window.devicePixelRatio (qui contient le facteur de zoom de l’écran).

À priori, selon moi, c’est Firefox qui implémenterait correctement les spec (très étonnant… #ironie).

#ChromeIsTheNewIE

https://developer.mozilla.org/fr/docs/Web/API/Screen/width

css - "font-family: monospace, monospace" - Stack Overflow

#16752

Wat.

Why does it work? How is "monospace, monospace" different to just "monospace"? Nobody knows.

*facepalm*

Ça reste bon à savoir.
Sinon, parfois j’ai remarqué que dans les champs input, il faut ajouter "font-size: 1em" si on ne veut pas que tout soit en minuscule. Également très bête, mais faut le savoir…

(via)

https://stackoverflow.com/questions/38781089/font-family-monospace-monospace

Firefox 57 : placer la barre personnelle verticalement - Le Hollandais Volant

#16711

Hop, et voilà comment on se passe d’une extension qui ne fonctionne plus : Firefox permet aussi de modifier l’interface, en CSS.

On peut tout modifier et ici j’utilise les transformations CSS pour tourner la barre de favoris sur le côté (+90°), puis de redresser les icônes individuelles (−90°).

Le tout est correctement assaisonné pour que ça s’affiche bien.

https://lehollandaisvolant.net/?d=2017/08/20/03/18/31-firefox-57-placer-la-barre-personnelle-verticalement

image - 788x810px

#16710

Firefox Nightly est super, mais ça y est : les extensions legacy ne marchent plus là… Y compris GreaseMonkey.

Du coup j’essaye de trouver des alternatives. Pour les scripts qui me servaient à modifier le CSS, il semble que le fichier /chrome/userContent.css fonctionne encore (c’est dans le dossier de profil de Firefox, et non, le dossier n’a rien à voir avec le navigateur Chrome).

Dans ce fichier on peut mettre le CSS qu’on veut pour cibler diverses pages/sites.

Par exemple, sur la capture (mon lien), j’ai mis en rouge les liens vers les pages anglaises, françaises et allemandes sur la liste des langues d’une page Wikipédia.

Si je suis une page Wiki en français, ça me highlight tout de suite le lien vers la page en anglais/allemand, et vice-versa (et sur les pages en d’autres langues, les trois langues sont surlignées).

Voilà le code dans l’userContent.css :

@-moz-document domain(wikipedia.org) {

	#p-lang a[hreflang="en"],
	#p-lang a[hreflang="de"],
	#p-lang a[hreflang="fr"] {
		font-weight: bold!important;
		color: red!important;
	}

}

Ajoutez toutes les langues que vous voulez, et tout le CSS que vous voulez aussi (n’oubliez pas le « !important » à mettre partout : le fichier userContent.css a la priorité la plus base du CSS).

Si j’étais moins fainéant, j’ajouterais des petites icônes de drapeau (en base64 ou webfont ou whatever) avec le ::after.

Firefox: break-word doesn't work inside flex items · Issue #39 · philipwalton/flexbugs · GitHub

#16690

Rhaa®, faut que j’arrive à retenir ça, je perds un temps fou à chaque fois avec les break-word.

En CSS, break-work permet de dire au navigateur qu’il doit couper les mots quand ils dépassent de leur conteneur. Voir là : https://developer.mozilla.org/fr/docs/Web/CSS/overflow-wrap (btw la propriété a changé de nom depuis 5 ans).

==

Je sais que sur Firefox, pour que ceci fonctionne également avec PRE et CODE, il faut le spécifier directement sur ces éléments (dont les styles internes sont en conflit avec break-word) :

 pre { white-space: pre-wrap; }

(voir là : https://lehollandaisvolant.net/?id=20120930215732 )
==
Maintenant, et ça c’est le lien : tout ceci entre également en conflit avec les boîtes flexibles.

Quand on a une boîte est en "flex" (donc son parent en "display:flex;"), alors la boîte s’adapte à son contenu et à son contenant. Le contenant on s’en fout ici, mais si le contenu est un mot super-long qui risque de dépasse, alors tout ça ne marche plus : en effet, les spécifications CSS disent que la boîte doit avoir une largeur minimale égale au contenu.

Du coup, la boîte reste trop large et le mot trop long ne se coupe pas.

Pour contrer ça, il faut spécifier une largeur minimale de 0px à la boîte avec le "flex".

Du coup j’ai fait un codepen : https://codepen.io/lehollandaisvolant/pen/MvOYxp

https://github.com/philipwalton/flexbugs/issues/39

Vivement les variables CSS ! – HTeuMeuLeu

#16458

Les variables peuvent se déclarer dans le body, ou encore le ::root, mais également dans des .classes.

Dans ce cas ils agissent comme des variables locales : si une variable est déclarée sur le .red et le .blue, alors un élément .block pourra avoir le couleur selon sa classe, quand bien même la variable utilisée pour cette couleur soit la même (voir la dernier exemple en bas).

http://www.hteumeuleu.fr/vivement-les-variables-css/

Note : détecter un navigateur mobile en JS

#16322

Généralement j’ai besoin de savoir si je suis sur mobile ou pas à cause des différences d’interaction entre mobile et desktop (pas de drag-n-drop possible sur mobile par exemple).

Ma méthode c’est de tester une propriété CSS en JS.
Vu que j’utilise les mediaQueries en CSS, quand je suis sur mobile, le CSS appliqué est changé et je détecte ça en JS.


body {
    color: blue;
}
@media (max-width: 700px) {
    body {
        color: red;
    }
}

var isMobile = (window.getComputedStyle(document.body).color != 'red') ? true : false;

Il suffit soit de détecter une propriété dont on est sûre qu’elle sera appliquée sur mobile, soit d’appliquer spécifiquement un bout de CSS bidon sur un élément bidon en CSS, spécifiquement pour cet usage.

Par exemple comme ça :


html {
    color: red;
}
body {
    color: black;
}
@media (max-width: 700px) {
    html {
        color: blue;
    }
}

Ici la page sera toujours en noir, à cause du body, prioritaire sur le html. Mais la couleur sur le html joue le rôle d’un flag.
Bien-sûr, ceci n’est valable que pour la majorité des cas et reste une détection basée sur la taille de l’écran (ou du viewport plutôt).

Si vous avez un écran tactile de 15 pouces, c’est sûr que ça restera le même CSS que sur un écran de PC de 15 pouces alors qu’au fond l’UX sera différente.

On peut toujours détecter la taille de l’écran directement en JS, mais c’est parfois difficile à cause des pixel ratio qui sont intégrées ou non (suivant le nav) dans la taille de l’écran détecté en JS.
Regardez la taille de l’écran sur un mobile sur cette page, vous verrez que ça n’est pas toujours la taille réelle en pixels de votre écran.

Mais ça peut suffire dans la plupart des cas et c’est léger.

https://lehollandaisvolant.net/?mode=links&id=20170326164213