Html5-boilerplate: ::sélection couleur d'arrière-plan par défaut

J'adore sélectionner du texte sur un site Web et voir qu'il est rose vif et savoir qu'ils ont utilisé le passe-partout.

Je vote qu'il reste rose vif ; si quelque chose est plus un encouragement pour les gens à le changer, si c'était juste le bleu par défaut, alors tout le monde ne le remarquerait pas et le laisserait alors nous aurions à nouveau des sites ennuyeux.

Merci d'avoir déposé ce problème Nicolas.

Je pense que le rose vif est un mauvais choix pour la sélection de texte car il est si évident et ne correspond souvent pas à la conception de nombreux sites Web - la sélection de texte sur des sites où cette valeur n'a pas été modifiée peut être assez choquante. J'encouragerais l'utilisation d'une couleur plus neutre ; les bleus ou les gris sont généralement de bons choix, mais peut-être qu'un jaune pâle pourrait aussi fonctionner.

Je suppose que cela est lié au problème sous-jacent des personnes qui n'étudient pas le contenu du passe-partout et l'utilisent en gros sans personnalisation. Il peut y avoir des limites quant à combien vous pouvez encourager les gens à être moins paresseux (et cela va peut-être à l'encontre de l'éthique d'un passe-partout), mais j'aimerais voir plus de communication autour de la personnalisation et de l'adaptation des fichiers. Peut-être que cela doit être classé dans un autre numéro ;-)

Enfin, j'ai entendu quelques personnes donner la même raison que Ben pour l'utilisation du rose vif. Je répondrais à cet argument en vous demandant pour qui développez-vous votre site Web ? Est-ce pour d'autres développeurs ou les utilisateurs de votre site Web ? Je suis sûr que pour la plupart des gens, voir une couleur rose vif sur la sélection de texte les confondrait plutôt que les divertirait.

Quelqu'un peut-il expliquer pourquoi la couleur d'arrière-plan ::selection doit même être remplacée en premier lieu ?

@abitgone Parce que vous ne pouvez pas simplement supprimer text-shadow sur la surbrillance sans que les navigateurs existants ne tuent également la couleur d'arrière-plan de surbrillance par défaut.

Je suis avec Paul ici, je n'ai pas encore vu de site Web où la sélection de texte en rose vif correspond au design et ne semble pas choquant. Y a-t-il une raison particulière pour laquelle les utilisateurs s'attendraient à ce que les paramètres par défaut du navigateur/système d'exploitation soient modifiés ?

Donc ::selection { text-shadow: none } ne fonctionne pas ? Même si c'est le cas, ce n'est sûrement pas une raison suffisante pour changer la couleur d'arrière-plan de la sélection par défaut ?

La couleur par défaut varie-t-elle selon les navigateurs/plates-formes ? Dans ce cas, il _peut_ être un cas pour fournir une couleur d'arrière-plan, mais cette valeur par défaut devrait être un choix neutre et réfléchi.

Je ne sais même pas pourquoi c'est un problème.

Nous ne pouvons pas tenir la main de tous les développeurs Web et leur dire de changer les styles par défaut de tout. Je pense que le rose est une bonne couleur pour te rappeler que, oh oui, tu devrais probablement changer ça.

Pourtant, les gens ne le changent pas, donc pour rappel, il échoue. Gardez à l'esprit que l'effet de ce style n'est pas immédiatement apparent. Bien mieux d'avoir un défaut sensé, sûrement ?

+1 pour le laisser tel quel. Changez-le si la couleur rose vous choque, laissez-le tranquille si ce n'est pas le cas.

Affaire classée.

Si l'intention est de s'éloigner du rose vif, alors l'éducation + le bleu par défaut est probablement le meilleur pari. Il n'y a pas de choix de couleur magique qui va "fonctionner" pour chaque site. Une couleur plus neutre peut ne pas sembler aussi mauvaise que le rose vif sur certains sites, mais plus nous nous rapprochons des couleurs professionnelles, plus il est probable que nous créons du texte disparaissant sur ::selection.

(j'ai oublié d'ajouter :)
Personnellement, je suis pour le laisser et trouver un moyen d'éduquer les gens à ce sujet en tant qu'élément de conception dont ils doivent tenir compte lors de la construction d'un site. Amener les gens à le concevoir site par site est mieux que de leur donner une valeur par défaut moins mauvaise.

La feuille de style n'est pas en lecture seule. Changez-le si cela vous offense. Personnellement, j'aime le rose.

+1 pour le laisser tel quel. L'ensemble du Boilerplate est compatible avec les touches de suppression. Si vous n'aimez pas la sélection de texte rose, choisissez une couleur différente ou supprimez simplement la ou les règles.

Il ne s'agit certainement pas de ce que vous « aimez ». Il s'agit de valeurs par défaut sensées utilisées dans un passe-partout.

Je n'aime pas voir le surlignage rose parce que 90% du temps c'est une erreur qu'il y ait été laissé ou que le développeur n'a pas su comment le changer. Le code passe-partout peut aider à réduire l'impact de cela en utilisant une valeur par défaut plus appropriée et neutre, qui ne compromet pas la conception visuelle.

Sérieusement? Si vous ne savez pas comment le changer du rose... vous ne devriez peut-être pas l'utiliser avant d'en savoir plus sur CSS ?

le rose est très chaud.

Ouais, c'est un passe-partout pour vous aider à démarrer ; pourquoi ne pas jeter la serviette et inclure un modèle entier avec !

Je pense que le rose vif ajoute du caractère et un « œuf de Pâques » mettant en évidence les développeurs qui ne testent pas correctement leur site.

Comme je l'ai mentionné précédemment, les navigateurs existants ne vous permettent pas de réinitialiser seulement text-shadow dans ::selection (c'est quelque chose qu'ils devraient probablement corriger). Le texte en surbrillance peut sembler un gâchis s'il contient également des ombres de texte de certaines couleurs ou tailles. Donc, si vous voulez éviter le problème de l'ombre du texte lors de la mise en évidence, vous devez déclarer un arrière-plan et une couleur ::selection .

Si ceux qui pensent que c'est un problème pouvaient s'orienter vers la présentation de cas de test et la proposition d'alternatives (en tant que code), ce serait formidable. Pour le moment, nous n'avons rien d'autre de concret à évaluer que de redéclarer le bleu par défaut au lieu d'utiliser le rose vif car le rose n'est pas considéré comme assez "neutre".

Personnellement, je trouve que le bleu est un défaut offensant. Rose pour toujours.

Hot Pink++

laissez le rose, h5bp ne devrait pas être modifié simplement parce que certains choisissent de ne pas mettre à jour la couleur de sélection

Rose vif FTW.

Peut-être que quelqu'un devrait fourcher le passe-partout, le seul changement étant la couleur sélectionnée par défaut ?

On dirait que ces gars ne sont pas d'accord, la couleur de sélection doit être modifiée :

Bon... c'est réglé

Je préférerais certainement le bleu... -1 pour le rose vif. Cela ne va jamais avec rien, à moins que vous ne construisiez un site avec du texte défilant, du texte rose sur fond jaune, des gifs animés clignotants... Oh attendez, nous n'utilisons plus HTML4/3 ni dans les années 90.

Comme tu veux nous faire croire que tu ne préfères pas le noir citronné ?

La dernière fois que j'ai vérifié que le noir de lime n'était pas une couleur. Si c'est le cas, ce serait un croisement entre le paradis et la génialité. :RÉ

Je ne sais pas, c'est comme si nous essayions de laisser une touche personnelle du passé colorifique . Je veux dire à part être un accident, pourquoi quelqu'un voudrait-il du rose ?

::-moz-selection { background: #000; color: #0F0; text-shadow: none; }
::selection { background: #000; color: #0F0; text-shadow: none; }

Je souhaite seulement que cela fonctionne...

::selection { background: linear-gradient(left, #0f0 0%,#000 100%); color: #fff; text-shadow: none; }

Ensuite, nous aurions du citron vert

Être l'autre personne qui a soulevé la question avec Paul. J'ai enfin eu le temps de laisser mes commentaires.

Mon problème n'est pas le choix de la couleur. Mon problème est la paresse des personnes qui utilisent le passe-partout et ne modifient pas la couleur pour qu'elle corresponde au reste du site. Vous voudriez sûrement qu'il soit lié au reste de votre site, n'est-ce pas ?

Ma demande est simple. Ajoutez un commentaire au-dessus/au-dessous de cette ligne de CSS rappelant aux gens qu'elle devrait/pourrait être modifiée pour s'adapter au « design » du site. Comme le « n'oubliez pas de redéfinir le contour » que vous obtiendriez sur un fichier de réinitialisation CSS.

Cela, espérons-le, empêcherait le concepteur/développeur d'être paresseux et de simplement couper et coller du code textuellement.

Merci Stu, je pense que c'est une idée parfaitement raisonnable.

En fait, les versions ultérieures de la réinitialisation d'Eric Meyer se sont éloignées de _juste_ l'ajout d'un commentaire. Voici les réflexions d'

…définir un focus invisible était la plus grosse erreur de la réinitialisation d'origine. Avec le recul, c'est vraiment une erreur non forcée évidente, mais lorsque j'ai publié la réinitialisation, je n'avais littéralement aucune idée qu'elle serait simplement copiée (ou, pire, liée) aveuglément dans un millier de sites et de frameworks. J'ai dit directement dans la feuille de style qu'il fallait définir un style de focus… en prenant tout sur une «base de référence simple», l'artisan réfléchi se verrait rappeler de définir le style de focus qui avait le plus de sens pour la conception de son site. Au lieu de cela, les contours de mise au point ont été effacés en gros car beaucoup de gens, pas tous des artisans, ont simplement copié la réinitialisation et l'ont construit dessus sans y penser.

Dans la dernière version de la réinitialisation, Eric utilise la notation suivante, en commentant toute la règle et en utilisant ????? comme espace réservé pouvant être remplacé :

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

Peut-être que la même approche peut être utilisée ici?

La suppression originale de outline dans la réinitialisation d'Eric Meyer était destructive car elle introduisait des problèmes d'accessibilité importants (un échec de la réinitialisation par défaut). L'utilisation d'une couleur différente pour l'arrière-plan de ::selection n'a pas ce problème.

La déclaration de couleur ::selection doit être évitée IMO. Il tue le style inactif des fenêtres (http://css-tricks.com/9288-window-inactive-styling/), ce qui est déjà une raison en soi.

Oui, nous savons cela. Mais il est fort probable que le problème de l'ombre du texte dans la surbrillance soit un problème plus important pour les utilisateurs que le style de sélection inactif. Pour moi, le problème est de savoir où se situe l'équilibre entre inclure cela par défaut, même s'il n'y a pas d'utilisation de text-shadow dans le site (afin de sauver les utilisateurs là où il y a du texte-ombre sur un site), ou déplacer pour « l'améliorer ».

Il convient de noter que cela est dans le passe-partout (et dans la nature) depuis un certain temps et que la seule raison pour laquelle un problème existe est parce que je l'ai créé. Donc, ce n'est probablement pas une affaire massive de toute façon.

"Le texte en surbrillance peut sembler un gâchis s'il a également des ombres de texte de certaines couleurs ou tailles. Donc, si vous voulez éviter le problème de l'ombre du texte lors de la surbrillance, vous devez déclarer un arrière-plan et une couleur de sélection."

Eh bien, nous ne pouvons pas empêcher les gens de prendre de mauvaises décisions de conception. text-shadow , la plupart du temps, ne doit pas être utilisé pour le corps du texte.

Cependant, si vous souhaitez toujours emprunter cette voie, je vous suggère d'utiliser la couleur par défaut du navigateur.

Ma pensée dans le CSS comme mentionné précédemment ressemblerait à quelque chose comme ça cependant

/_-- N'OUBLIEZ PAS de changer cette couleur pour l'adapter à VOTRE design --_/

Premièrement : +1 pour l'avoir laissé.

Le reste de mon commentaire s'adresse principalement aux personnes qui ont soulevé le problème (ce sera donc @necolas et @sturobson) :

Personne ne peut juger quelle est la bonne couleur pour le surlignage de la sélection. Si cette discussion est valable, alors on peut débattre du fait que nous devrions également discuter de la couleur "idéale" pour les balises d'ancrage (une boîte de vers séparée).

Le point est : Ceci est totalement dépendant de la conception et _devrait_ être maintenu/mis à jour par le concepteur, tout comme les balises d'ancrage.

J'adore le rose vif ! Mais pour tous ceux qui le détestent, veuillez ajouter et mettre à jour ces règles au bas de votre fichier CSS :

::-moz-selection { background: #fe57a1; color: #fff; }
::selection { background: #fe57a1; color: #fff; }

Je n'ai enregistré le problème qu'au nom de Paul Lloyd.

Mais la discussion est parfaitement valable. Les couleurs des liens standard par défaut _ont_ été normalisées pour correspondre aux paramètres par défaut des navigateurs modernes.

@sturobson J'ai ajouté un commentaire dans ce sens : https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

Je m'attends à ce que l'ajout de ce commentaire n'ait aucun impact, mais au moins c'est un pas dans la bonne direction. Merci d'avoir suivi ce problème Nicolas.

Les couleurs des liens standard par défaut ont en fait été normalisées pour correspondre aux paramètres par défaut des navigateurs modernes.

Ce qui soulève la question, pourquoi ne pas normaliser la couleur de sélection de la même manière ? La façon dont le rose vif est porté comme une sorte de « insigne d'honneur » est un état de choses assez triste.

et.... scène !

J'ai probablement perdu 80 heures de ma vie à changer cela en rose vif.

A chaque fois je dois retrouver ce fil pour avoir le code couleur.

Je me fiche de savoir pourquoi je ne devrais pas le régler, la sélection sera toujours rose bon sang !

@innovandrew bravo !