Html5-boilerplate: :: Selección de color de fondo por defecto

Me encanta seleccionar texto en un sitio web y ver que es de color rosa intenso y saber que usaron el texto estándar.

Yo voto que sigue siendo rosa fuerte; si hay algo que sea más un estímulo para que la gente lo cambie, si solo fuera el azul predeterminado, entonces todos no lo notarían y simplemente lo dejarían, entonces tendríamos sitios aburridos una vez más.

Gracias por presentar este problema, Nicolás.

Creo que el rosa fuerte es una mala elección para la selección de texto, ya que es muy evidente y, a menudo, no encaja con el diseño de muchos sitios web; la selección de texto en sitios donde este valor no ha cambiado puede ser bastante discordante. Recomendaría el uso de un color más neutro; los azules o grises suelen ser buenas opciones, pero tal vez un amarillo pálido también funcione.

Supongo que esto se relaciona con el problema subyacente de las personas que no estudian el contenido del texto estándar y lo usan al por mayor sin personalización. Puede haber límites en cuanto a cuánto puede alentar a las personas a ser menos perezosas (y tal vez esto vaya en contra del espíritu de un modelo estándar), pero me gustaría ver más comunicación sobre la personalización y adaptación de los archivos. Tal vez eso deba archivarse en una edición diferente ;-)

Finalmente, escuché a algunas personas dar la misma razón que Ben para usar rosa fuerte. Contrarrestaría este argumento preguntando para quién está desarrollando su sitio web. ¿Es para otros desarrolladores o para los usuarios de su sitio web? Estoy seguro de que para la mayoría de las personas, ver un color rosa brillante en la selección de texto los confundiría en lugar de entretenerlos.

¿Alguien puede explicar por qué el color de fondo ::selection necesita ser anulado en primer lugar?

@abitgone Porque no puede simplemente eliminar text-shadow en el resaltado sin que los navegadores existentes también eliminen el color de fondo del resaltado predeterminado.

Estoy con Paul aquí, todavía no he visto un sitio web en el que la selección de texto rosa fuerte se ajuste al diseño y no parezca impactante. ¿Hay alguna razón en particular por la que se haya cambiado el navegador / sistema operativo predeterminado que los usuarios esperarían?

¿Entonces ::selection { text-shadow: none } no funciona? Incluso si ese es el caso, seguramente esa no es una razón lo suficientemente fuerte para cambiar el color de fondo de la selección predeterminada.

¿El color predeterminado varía entre navegadores / plataformas? En cuyo caso, _puede_ haber un caso para proporcionar un color de fondo, pero ese valor predeterminado debe ser una opción neutral y considerada.

Ni siquiera estoy seguro de por qué esto es un problema.

No podemos tomar las manos de todos los desarrolladores web y decirles que cambien los estilos predeterminados de todo. Creo que el rosa es un buen color para recordarte que, oh sí, probablemente deberías cambiar eso.

Sin embargo, la gente no lo está cambiando, así que como recordatorio, falla. Tenga en cuenta que el efecto de este estilo no es evidente de inmediato. Mucho mejor tener un valor predeterminado razonable, ¿no?

+1 por dejarlo como está. Cámbielo si el color rosa le ofende, déjelo en paz si no lo hace.

Caso cerrado.

Si la intención es alejarse del rosa fuerte, entonces la educación + el azul predeterminado es probablemente la mejor opción. No existe una elección de color mágica que funcione para todos los sitios. Es posible que un color más neutro no se vea tan mal como el rosa intenso en algunos sitios, pero cuanto más nos acercamos a los colores comerciales, más probable es que creemos un texto que desaparece en la :: selección.

(olvidé agregar :)
Personalmente, estoy a favor de dejarlo y pensar en alguna forma de educar a las personas sobre él como un elemento de diseño que deben tener en cuenta al construir un sitio. Hacer que las personas lo diseñen por sitio es mejor que darles un valor predeterminado menos malo.

La hoja de estilo no es de solo lectura. Cámbielo si le ofende. Personalmente, me gusta el rosa.

+1 por dejarlo como está. Todo el Boilerplate es compatible con la eliminación de claves. Si no le gusta la selección de texto rosa, elija un color diferente o simplemente elimine las reglas por completo.

Seguramente no se trata de lo que 'te gusta'. Se trata de utilizar valores predeterminados razonables en un modelo estándar.

No me gusta ver el resaltado rosa porque el 90% de las veces es un error que se haya dejado allí, o el desarrollador no ha sabido cómo cambiarlo. El código repetitivo puede ayudar a reducir el impacto de esto mediante el uso de un valor predeterminado más adecuado y neutral, que no socava el diseño visual.

¿Seriamente? Si no puede averiguar cómo cambiarlo de rosa ... ¿quizás no debería usarlo antes de aprender más sobre css?

el rosa es muy caliente.

Sí, es una repetición para empezar; ¿Por qué no tirar la toalla e incluir una plantilla completa?

Creo que el rosa fuerte agrega algo de carácter y un 'huevo de pascua' destacando a los desarrolladores que no prueban su sitio correctamente.

Como mencioné antes, los navegadores existentes no le permiten restablecer solo text-shadow en ::selection (esto es algo que probablemente deberían arreglar). El texto resaltado puede verse desordenado si también tiene sombras de texto de ciertos colores o tamaños. Entonces, si desea evitar el problema de texto-sombra-cuando-resaltado, debe declarar un fondo y color ::selection .

Si aquellos que piensan que esto es un problema pudieran avanzar hacia la presentación de casos de prueba y proponer alternativas (como código), sería genial. Por el momento, no tenemos nada más concreto que evaluar más que redeclarar el azul predeterminado en lugar de usar rosa fuerte porque el rosa no se considera lo suficientemente "neutral".

Personalmente, considero que el azul es un valor predeterminado ofensivo. Rosa para siempre.

Hot Pink++

deje el rosa, h5bp no debe cambiarse solo porque algunos eligen no actualizar el color de selección

FTW rosa fuerte.

¿Quizás alguien debería bifurcar la placa de calderas, con el único cambio siendo el color de selección predeterminado?

Parece que estos chicos no están de acuerdo en que se debe cambiar el color de selección:

Bueno ... eso está resuelto

Definitivamente preferiría el azul ... -1 para el rosa fuerte. Nunca va con nada, bueno, a menos que construyas un sitio con texto en movimiento, texto rosa sobre un fondo amarillo, gifs animados parpadeantes ... Oh, espera, ya no usamos HTML4 / 3 ni estamos en la década de 1990.

¿Quieres que creamos que no prefieres el negro lima?

La última vez que comprobé que el negro lima no es un color. Si lo es, sería una mezcla entre el cielo y lo maravilloso. :D

No sé, solo se siente como si estuviéramos tratando de dejar un toque personal del pasado colorido . Quiero decir, además de ser un accidente, ¿por qué alguien querría el rosa?

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

Solo desearía que esto funcionara ...

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

Entonces tendríamos negro lima

Siendo la otra persona que ha planteado el problema junto con Paul. Finalmente logré dejar mis comentarios.

Mi problema no es la elección del color. Mi problema es la pereza de la gente que usa el texto estándar y no edita el color para que encaje con el resto del sitio. Seguramente le gustaría que se vincule con el resto de su sitio, ¿verdad?

Mi solicitud es simple. Agregue un comentario arriba / debajo de esta línea de CSS para recordarle a la gente que debería / podría cambiarse para adaptarse al 'diseño' del sitio. Como el 'no te olvides de redefinir el esquema' que obtendrías en un archivo de restablecimiento de CSS.

Con suerte, esto evitaría que el diseñador / desarrollador sea perezoso y solo corte y pegue el código palabra por palabra.

Gracias Stu, creo que es una idea perfectamente razonable.

En realidad, las versiones posteriores del restablecimiento de Eric Meyer en realidad se alejaron de _sólo_ agregar un comentario. Estos son los pensamientos de

… Definir un foco invisible fue el mayor error del reinicio original. En retrospectiva, es realmente un error obvio no forzado, pero cuando publiqué el restablecimiento, literalmente no tenía la idea de que se copiaría (o, peor aún, se vincularía) a ciegas en miles de sitios y marcos. Dije en la hoja de estilo que se debe definir un estilo de enfoque ... al llevar todo a una “línea de base simple”, se le recordará al artesano reflexivo que defina el estilo de enfoque que tenga más sentido para el diseño de su sitio. En cambio, los contornos de enfoque fueron borrados al por mayor ya que muchas personas, no todos ellos artesanos, simplemente copiaron el reinicio y construyeron sobre él sin pensarlo.

En la última versión del reinicio, Eric usa la siguiente notación, comentando toda la regla y usando ????? como marcador de posición que se puede reemplazar:

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

¿Quizás se pueda utilizar el mismo enfoque aquí?

La eliminación original de outline en el restablecimiento de Eric Meyer fue destructiva porque introdujo importantes problemas de accesibilidad (una falla del restablecimiento predeterminado). Usar un color diferente para el fondo ::selection no tiene ese problema.

En mi opinión, debe evitarse la declaración de :: color de selección. Mata el estilo inactivo de la ventana (http://css-tricks.com/9288-window-inactive-styling/), que ya es una razón en sí misma.

Sí, lo sabemos. Pero es bastante probable que el problema de la sombra del texto al resaltar sea un problema mayor para los usuarios que el estilo de selección inactivo. Para mí, el problema es dónde está el equilibrio entre incluir esto de forma predeterminada, incluso si no hay un uso de text-shadow en el sitio (para guardar a los usuarios donde hay una sombra de texto en un sitio), o mover para 'hacerlo mejor'.

Vale la pena señalar que esto ha estado en el texto estándar (y en la naturaleza) durante algún tiempo y la única razón por la que existe un problema es porque lo creé. Por lo tanto, probablemente no sea un gran problema de cualquier manera.

"El texto resaltado puede verse desordenado si también tiene sombras de texto de ciertos colores o tamaños. Por lo tanto, si desea evitar el problema de la sombra del texto cuando se resalta, debe declarar un :: fondo y color de selección".

Bueno, no podemos evitar que la gente tome malas decisiones de diseño. text-shadow , la mayoría de las veces, no debe usarse para el cuerpo del texto.

Aunque, si aún desea seguir esa ruta, le sugiero que use el color predeterminado del navegador.

Sin embargo, mi pensamiento en el CSS, como se mencionó anteriormente, se vería así

/ _-- RECUERDA cambiar este color para adaptarlo a TU diseño --_ /

Primero: +1 por dejarlo.

El resto de mi comentario es principalmente para las personas que plantearon el problema (por lo que serán @necolas y @sturobson):

Nadie puede juzgar cuál es el color correcto para resaltar la selección. Si esta discusión es válida, entonces se puede debatir que también deberíamos discutir el color "ideal" para las etiquetas de anclaje (una lata separada de gusanos).

El punto es: esto es algo totalmente dependiente del diseño y _debe_ ser mantenido / actualizado por el diseñador, al igual que las etiquetas de anclaje.

¡Me encanta el rosa fuerte! Pero para cualquiera que lo odie, agregue y actualice estas reglas en la parte inferior de su archivo CSS:

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

Solo registré el problema en nombre de Paul Lloyd.

Pero la discusión es perfectamente válida. Los colores predeterminados de los enlaces estándar _ se han normalizado en realidad para que coincidan con los valores predeterminados de los navegadores modernos.

@sturobson He añadido un comentario en ese sentido: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

Espero que la adición de ese comentario tenga un impacto nulo, pero al menos es un paso en la dirección correcta. Gracias por dar seguimiento a este tema, Nicolas.

Los colores predeterminados de los enlaces estándar se han normalizado para que coincidan con los valores predeterminados de los navegadores modernos.

Lo que plantea la pregunta, ¿por qué no normalizar el color de selección de la misma manera? La forma en que se usa el rosa fuerte como una especie de 'insignia de honor' es un estado de cosas bastante triste.

y .... escena!

Probablemente he perdido 80 horas de mi vida cambiando esto de nuevo a rosa fuerte.

Cada vez que tengo que encontrar este hilo para obtener el código de color.

No me importa por qué no debería configurarlo, ¡la selección siempre será rosa, maldita sea!

@innovandrew ¡ Pulgares arriba!