span - style html ejemplos
CSS por defecto de los navegadores para elementos HTML (3)
¿Dónde puedo encontrar el CSS predeterminado de un navegador para elementos HTML?
Muchos elementos HTML vienen con algunas propiedades CSS predeterminadas que a veces pueden dar como resultado un comportamiento desconocido / no deseado. Por ejemplo, los cuadros de entrada se muestran de forma diferente en diferentes navegadores. Estoy buscando un lugar que cubra las nuevas propiedades de CSS3 y los nuevos elementos de HTML5.
He visto en otras preguntas (mucho más antiguas) (como las hojas de estilo CSS predeterminadas de los navegadores ) respuestas que sugieren una solución de restablecimiento de CSS. A veces, esta solución no se desea, a menudo me gustaría mantener algunas de las propiedades básicas (como el resaltado de cuadros de entrada en Chrome). En otras palabras: no quiero deshacerme de las cosas solo porque no sé lo que hacen .
Entonces, ¿hay un sitio que pueda darme toda esta información (o tal vez la mayoría)?
Es diferente para cada navegador, entonces:
- Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . O vaya a
resource://gre-resources/y mirehtml.css. - Chrome / Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
- Internet Explorer (Trident) , versiones anteriores: http://web.archive.org/web/20170122223926/http://www.iecss.com/
También puede consultar la hoja de estilo HTML5 Boilerplate , que "normaliza la visualización de muchas cosas sin restablecerse en el sentido tradicional". También soluciona bastantes errores / inconsistencias.
También vale la pena mirar: https://github.com/necolas/normalize.css/blob/master/normalize.css
Si bien este es un viejo problema de navegador cruzado, ya que cada navegador tiene su propia representación y comportamiento con algunos elementos html como elementos de medios e insumos, ahora en 2017 podemos utilizar con bastante seguridad los filtros css proprety encima de ellos.
Esto permite dar una paleta de colores con el filtro de tono y rotación que renderizará navegadores cruzados muy bien.
Los siguientes fragmentos muestran una forma de utilizar un color de tipo de entrada para representar este efecto en tiempo real en un elemento de video con javascript.
Para usar solo css, es obligatorio usar cada uno de estos filtros: sepia no a 0, alta saturación, escala de grises a 0, alto contraste, y luego dar un color con la propiedad de oscurecimiento de tono, siguiendo mis pruebas. El filtro invertido no es obligatorio, pero está dando algunos efectos profundos.
Además, el filtro de sombra está funcionando bastante bien en el navegador cruzado. Para ser usado así: filter: drop-shadow (2px 20px 50px red) [X, Y, RADIUS, COLOR]
function styloElem() {
stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
}
styloElem()
body {
text-align:center;
background:#001;
color: white
}
video {
width:500px;max-width:500px
}
Colors:
<input
type="color"
id="stylo"
oninput="styloElem()"
class="media"
data-hue="0" />
<br><br>
<video
controls
id="media"
onplay="this.removeAttribute(''controls'');this.style.all=''unset''"
onpause="this.controls=''controls'';styloElem()"
src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>
¿Puedo usar filtros css?
http://caniuse.com/#feat=css-filters
Una barra de herramientas que hice alrededor de los filtros css, de donde provienen estas notas:
https://github.com/webdev23/ponyFilters
Un ejemplo más completo de codepen:
here se puede encontrar un repositorio de GitHub de todas las especificaciones HTML de W3C y las hojas de estilo CSS predeterminadas por el proveedor.
1. Estilos predeterminados para Firefox
2. Estilos predeterminados para Internet Explorer
3. Estilos predeterminados para Chrome / Webkit
4. Estilos predeterminados para Opera
5. Estilos predeterminados para HTML4 (especificación W3C)
6. Estilos predeterminados para HTML5 (especificación W3C)
Muestra, según la especificación W3C HTML4 predeterminada:
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "/A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}