Html5-boilerplate: :: seleção de cor de fundo padrão

Eu amo selecionar texto em um site e ver que é rosa choque e saber que eles usaram o clichê.

Eu voto que fica rosa choque; se algo for mais um incentivo para as pessoas mudá-lo, se fosse apenas o azul padrão, então todos não perceberiam e simplesmente deixariam, então teríamos sites enfadonhos novamente.

Obrigado por registrar esta questão, Nicolas.

Acho que rosa choque é uma escolha ruim para a seleção de texto, pois é muito aparente e geralmente não se encaixa no design de muitos sites - a seleção de texto em sites onde esse valor não foi alterado pode ser bastante chocante. Eu encorajaria o uso de uma cor mais neutra; azuis ou cinzas geralmente são boas escolhas, mas talvez um amarelo claro também funcione.

Acho que isso está relacionado ao problema subjacente de as pessoas não estudarem o conteúdo do clichê e usá-lo no atacado, sem personalização. Pode haver limites para o quanto você pode encorajar as pessoas a serem menos preguiçosas (e talvez isso vá contra o ethos de um clichê), mas eu gostaria de ver mais comunicação sobre como personalizar e adaptar os arquivos. Talvez isso precise ser arquivado em uma edição diferente ;-)

Finalmente, ouvi algumas pessoas darem o mesmo motivo que Ben para usar rosa choque. Eu rebateria esse argumento perguntando para quem você está desenvolvendo seu site? É para outros desenvolvedores ou para os usuários do seu site? Tenho certeza de que, para a maioria das pessoas, ver uma cor rosa brilhante na seleção de texto iria confundi-las em vez de entretê-las.

Alguém pode explicar por que a cor de fundo ::selection precisa ser substituída em primeiro lugar?

@abitgone Porque você não pode simplesmente remover text-shadow em destaque sem os navegadores existentes também matando a cor de fundo de destaque padrão.

Estou com Paul aqui, ainda não vi um site onde a seleção de texto rosa choque se encaixa com o design e não parece chocante. Existe algum motivo específico para a alteração do padrão do navegador / sistema operacional que os usuários esperariam?

Então ::selection { text-shadow: none } não funciona? Mesmo se for esse o caso, certamente não é um motivo forte o suficiente para alterar a cor de fundo de seleção padrão.

A cor padrão varia entre navegadores / plataformas? Nesse caso, _pode_ haver o caso de fornecer uma cor de fundo, mas esse padrão deve ser uma escolha neutra e considerada.

Eu nem tenho certeza de por que isso é um problema.

Não podemos segurar as mãos de cada desenvolvedor web e dizer a eles para mudar os estilos padrão de tudo. Eu acho que o rosa é uma boa cor para lembrá-lo que, oh sim, você provavelmente deveria mudar isso.

Ainda assim, as pessoas não estão mudando isso, então, como um lembrete, ele falha. Tenha em mente que o efeito desse estilo não é imediatamente aparente. Muito melhor ter uma inadimplência sensata, certo?

1 para deixá-lo como está. Mude-o se a cor rosa ofende você, deixe como está se não ofender.

Caso encerrado.

Se a intenção é afastar-se do rosa choque, educação + o azul padrão é provavelmente a melhor aposta. Não há nenhuma escolha de cor mágica que "funcione" em todos os sites. Uma cor mais neutra pode não parecer tão ruim quanto o rosa choque em alguns sites, mas quanto mais perto chegarmos das cores comerciais, maior será a probabilidade de criarmos um texto que desaparece em :: seleção.

(esqueci de adicionar :)
Pessoalmente, quero deixá-lo e descobrir uma maneira de educar as pessoas sobre ele como um elemento de design que elas precisam considerar ao construir um site. Fazer com que as pessoas o projetem por site é melhor do que dar a eles um padrão menos ruim.

A folha de estilo não é somente leitura. Mude se isso te ofende. Pessoalmente, gosto do rosa.

1 para deixá-lo como está. Todo o Boilerplate é amigável para a exclusão de teclas. Se você não gosta da seleção de texto rosa, escolha uma cor diferente ou apenas remova a (s) regra (s).

Não se trata do que você 'gosta', com certeza. É sobre padrões razoáveis ​​sendo usados ​​em um clichê.

Não gosto de ver o destaque rosa porque 90% das vezes é um erro ter sido deixado lá ou o desenvolvedor não saber como alterá-lo. O código clichê pode ajudar a reduzir o impacto disso usando um padrão mais adequado e neutro, que não prejudica o design visual.

A sério? Se você não consegue descobrir como alterá-lo de rosa ... talvez você não devesse usá-lo antes de aprender mais sobre css?

rosa é muito quente.

Sim, é um clichê para você começar; por que não jogar a toalha e incluir um modelo inteiro com ela!

Acho que o rosa choque adiciona algum caráter e um 'ovo de páscoa' destacando os desenvolvedores que não testam seu site corretamente.

Como mencionei antes, os navegadores existentes não permitem redefinir apenas text-shadow em ::selection (isso é algo que eles provavelmente deveriam consertar). O texto destacado pode parecer uma bagunça se também tiver sombras de texto de certas cores ou tamanhos. Portanto, se você quiser evitar o problema da sombra do texto quando realçado, deverá declarar um fundo e uma cor ::selection .

Se aqueles que pensam que isso é um problema pudessem passar a apresentar casos de teste e propor alternativas (como código), isso seria ótimo. No momento, não temos nada mais concreto para avaliar a não ser redeclarar o azul padrão em vez de usar rosa choque, porque o rosa não é considerado "neutro" o suficiente.

Pessoalmente, acho que o azul é um padrão ofensivo. Rosa para sempre.

Hot Pink++

deixe o rosa, h5bp não deve ser alterado só porque alguns optaram por não atualizar a cor de seleção

Hot Pink FTW.

Talvez alguém deva bifurcar o clichê, com a única mudança sendo a cor de seleção padrão?

Parece que esses caras discordam que a cor de seleção deve ser alterada:

Bem ... está resolvido

Eu definitivamente preferiria azul ... -1 para rosa choque. Nunca combina com nada, bem, a menos que você esteja construindo um site com texto de rolagem, texto rosa em um fundo amarelo, gifs animados piscando ... Oh, espere, não estamos mais usando HTML4 / 3 nem estamos na década de 1990.

Como você quer que acreditemos que você não prefere o limeblack?

A última vez que verifiquei o limeblack não é uma cor. Se for assim, seria um cruzamento entre o paraíso e a grandiosidade. : D

Não sei, apenas parece que estamos tentando deixar um toque pessoal do passado colorido . Quer dizer, além de ser um acidente, por que alguém iria querer rosa?

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

Eu só queria que isso funcionasse ...

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

Então teríamos preto limão

Sendo a outra pessoa que levantou a questão junto com Paul. Eu finalmente consegui deixar meus comentários.

Meu problema não é a escolha da cor. Meu problema é a preguiça das pessoas que usam o clichê e não editam a cor para que fique com o resto do site. Certamente você gostaria que ele se relacionasse com o resto do seu site, certo?

Meu pedido é simples. Adicione um comentário acima / abaixo desta linha de CSS lembrando as pessoas de que ele deve / pode ser alterado para se adequar ao 'design' do site. Como o 'não se esqueça de redefinir o contorno' que você obteria em um arquivo de redefinição CSS.

Esperançosamente, isso impediria o designer / desenvolvedor de ser preguiçoso e apenas cortar e colar o código literalmente.

Obrigado Stu, acho que é uma ideia perfeitamente razoável.

Na verdade, as versões posteriores do reset de Eric Meyer na verdade deixaram de _just_ adicionar um comentário. Aqui está a opinião de Eric sobre deixar o valor padrão para a: regra de foco:

… Definir um foco invisível foi o maior erro da reinicialização original. Em retrospecto, é realmente um erro não forçado óbvio, mas quando publiquei o reset, literalmente não tinha ideia de que seria apenas copiado (ou, pior, hotlinked) cegamente em milhares de sites e estruturas. Eu disse certo na folha de estilo que deve-se definir um estilo de foco ... levando tudo para uma “linha de base simples”, o artesão atencioso seria lembrado de definir o estilo de foco que fazia mais sentido para o design de seu site. Em vez disso, os contornos do foco foram obliterados no atacado à medida que muitas e muitas pessoas, nem todos eles artesãos, apenas copiavam o reset e construíam em cima dele sem pensar sobre isso.

Na última versão do reset, Eric usa a seguinte notação, comentando toda a regra e usando ????? como um marcador que pode ser substituído:

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

Talvez a mesma abordagem possa ser usada aqui?

A remoção de outline na redefinição de Eric Meyer foi destrutiva porque introduziu problemas de acessibilidade significativos (uma falha na redefinição padrão). Usar uma cor diferente para o fundo ::selection não tem esse problema.

A declaração de cor :: selection deve ser evitada IMO. Ele mata o estilo inativo da janela (http://css-tricks.com/9288-window-inactive-styling/), que já é uma razão por si só.

Sim, nós sabemos disso. Mas é bem provável que a questão da sombra do texto no realce seja um problema maior para os usuários do que o estilo de seleção inativa. Para mim, a questão é onde o equilíbrio está entre incluir isso por padrão, mesmo que não haja text-shadow usado no site (para salvar os usuários onde há sombra de texto em um site), ou mover para 'torná-lo melhor'.

É importante notar que isso está no clichê (e na natureza) há algum tempo e a única razão pela qual existe um problema é porque eu o criei. Portanto, provavelmente não é um grande negócio de qualquer maneira.

"O texto destacado pode parecer uma bagunça se também tiver sombras de texto de certas cores ou tamanhos. Portanto, se você quiser evitar o problema de sombra de texto quando destacado, então você deve declarar uma :: seleção de fundo e cor."

Bem, não podemos evitar que as pessoas tomem decisões erradas de design. text-shadow , na maioria das vezes, não deve ser usado para cópia do corpo.

Embora, se você ainda quiser seguir esse caminho, sugiro usar a cor padrão do navegador.

Meu pensamento no CSS, conforme mencionado anteriormente, seria algo assim

/ _-- LEMBRE-SE de mudar esta cor para se adequar ao SEU design --_ /

Primeiro: +1 para deixá-lo dentro.

O resto do meu comentário é principalmente para as pessoas que trouxeram o problema (então serão @necolas e @sturobson):

Ninguém pode julgar qual é a cor correta para o destaque de seleção. Se essa discussão for válida, pode-se debater se também devemos discutir a cor "ideal" para as etiquetas âncora (uma lata separada de vermes).

O ponto é: Isso é totalmente dependente do design e _deve_ ser mantido / atualizado pelo designer, assim como as tags âncora.

Eu amo rosa quente! Mas para qualquer pessoa que odeie isso, adicione e atualize estas regras na parte inferior do seu arquivo CSS:

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

Eu só registrei o problema em nome de Paul Lloyd.

Mas a discussão é perfeitamente válida. As cores padrão dos links _foram_ na verdade normalizadas para corresponder aos padrões dos navegadores modernos.

@sturobson Eu adicionei um comentário nesse sentido: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

Espero que a adição desse comentário tenha impacto zero, mas pelo menos é um passo na direção certa. Obrigado por acompanhar esta questão, Nicolas.

As cores padrão do link padrão foram, na verdade, normalizadas para corresponder aos padrões do navegador moderno.

O que levanta a questão, por que não normalizar a cor de seleção da mesma maneira? A maneira como o rosa choque está sendo usado como uma espécie de "emblema de honra" é uma situação muito triste.

e .... cena!

Provavelmente perdi 80 horas da minha vida mudando isso de volta para rosa choque.

Sempre que preciso encontrar este segmento para obter o código de cores.

Eu não me importo por que eu não deveria configurá-lo, a seleção sempre será rosa, droga!

@innovandrew polegares para cima!