Geekly articles weekly

Enfoque personalizado para normalizar y restablecer estilos (custom-reset.css)



Aquí compartiré mis mejores prácticas para normalizar y restablecer estilos.
Durante varios años he formado un pequeño archivo, cuya base, inicialmente, se tomó para normalizar.

¿Por qué normalizar, no restablecer? Está encarcelado específicamente por la compatibilidad entre navegadores, lo cual es muy importante. Pero en su forma pura, no me convenía en absoluto, solo interfirieron varias sangrías, bordes, etc., por lo que lo ajusté un poco a mis necesidades, eliminando lo que no necesitaba.
Con el tiempo, el archivo creció, el exceso se eliminó de la normalización, se agregó lo que faltaba.
El objetivo principal de su creación fue preparar la base para cualquier proyecto tanto como sea posible, que en mi opinión resultó, incluso con mucho éxito. El archivo resultó ser bastante universal, pero sin embargo, antes de preparar un proyecto, debe analizarlo y posiblemente corregir algo.

Espero que enfatices algo útil para ti, aquí puedes familiarizarte con él.
custom-reset.css

Breve descripción


  • La capacidad de cambiar etiquetas sin comprometer el diseño. Que corresponde al principio DRY (- minimizar la cantidad de edición requerida para realizar cambios).
  • Reducción a cero completa de los estilos del navegador.
    El hecho de que un elemento tenga estilos predeterminados no significa en absoluto que serán necesarios exactamente en el lugar donde se usa esta etiqueta.
  • Normalización de las piezas necesarias del navegador.
  • IE 10+
  • Algunos fragmentos simples y útiles.
  • y consejos


Definición del modelo de bloque


*, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; }

Dicha definición hace posible redefinir box-sizing , si es necesario, para un área determinada, por ejemplo, si se agregó un componente al proyecto que tenía box-sizing: content-box;

Ajustes básicos


 body { margin: 0; background-color: #fff; line-height: 1; text-rendering: optimizeLegibility; text-decoration-skip: objects; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

  • text-rendering : define cómo el navegador optimiza la representación de texto.
    optimizeLegibility : la visualización de alta calidad es más importante que la velocidad, permite el interletraje y las ligaduras.
  • text-decoration-skip: objects;
    Hace subrayado con text-decoration: underline; ininterrumpido (donde funciona).


  • -webkit-text-size-adjust: 100%; - prohibir el ajuste del tamaño de fuente después de cambiar la orientación en iOS.
  • -webkit-font-smoothing: antialiased; - hace que el texto sea más sutil en Macs Safari (el estilo es suave y nítido al mismo tiempo, es agradable de leer).
  • -webkit-tap-highlight-color: transparent; - elimina el resaltado azul al hacer clic en dispositivos.




el enfoque es importante pero el esquema no lo es


 :focus { outline: none; }

El estado de enfoque es un punto muy importante para interactuar con elementos interactivos. (Cómo y por qué aquí ). Pero el outline menudo no encaja en el diseño. Y los diseñadores mismos rara vez dibujan este estado, porque la duplicación de los estilos de desplazamiento se ha convertido en una práctica frecuente.

Esta es una manera perezosa.

 .no-touch { &:hover, &:focus { ... } }

Los diseñadores normales siempre dibujan el estado de enfoque.

Siempre deben estar presentes tres estados básicos en cada elemento interactivo ( :hover, :focus, :active ).



→ Codepen

Sangría


La sangría se pone a cero, las propiedades del texto se heredan.

 p, dd, dl, figure, blockquote { margin: 0; } /*       <dl>.   .        (): dl>div*3>dd{value}+dt{prop} */ blockquote, q { quotes: none; } ul, ol { padding: 0; margin: 0; list-style-type: none; } table { border-collapse: collapse; border-spacing: 0; } th { font-weight: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; } audio, video { display: block; } img { display: block; border: none; /*max-width: 100%;*/ } iframe { border: none; } pre, code, kbd, samp { font-family: monospace, monospace; font-size: inherit; }

Si necesita sangrías para contenido personalizado (y son necesarias), debe haber un contenedor de clase y una guía de estilo.

Un ejemplo:

 .description { h1, h2, h3, h4 { /* style */ } p { /* style */ } /*  . . */ }

El contenido de texto también debe ser capaz de escribir correctamente configurando la sangría y la altura de línea correctas.

Aquí hay un artículo sobre este tema.

Sobre qué contenido personalizado puede ser:



Elementos de texto


Herencia completa. Los enlaces ya no son azules, fuertes no son audaces, no son italianos. Em, fuertes son elementos semánticos, no se usan para decoración. Por ejemplo, para nombres de productos en tarjetas. El hecho de que tengan estilos predeterminados no significa que serán necesarios exactamente en el lugar donde se usa esta etiqueta.

El color y el subrayado del enlace interfieren cuando este enlace tiene la forma de un botón o como un botón grande con una imagen y texto.

 a { background-color: transparent; text-decoration: none; color: inherit; } abbr { border: none; text-decoration: none; } b, strong { font-weight: inherit; } i, em { font-style: inherit; } dfn { font-style: inherit; } mark { background-color: transparent; color: inherit; } small { font-size: inherit; } sub, sup { position: relative; vertical-align: baseline; font-size: inherit; line-height: 0; } sub { bottom: -.25em; } sup { top: -.5em; }

Elementos de forma:


Los estilos asignados a los botones y las entradas se eliminan por completo, lo que puede parecer controvertido para alguien.

Sucede que existen inconvenientes con los botones al cambiar las etiquetas, la mayoría de las veces ocurre con un enlace a un botón y viceversa.

 button, input, optgroup, select, textarea { padding: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; background-color: transparent; font: inherit; /*  ,  ,      */ color: inherit; letter-spacing: inherit; } button, input { overflow: visible; } button, select { text-align: left; text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { cursor: pointer; -webkit-appearance: none; } textarea { resize: none; overflow-y: auto; overflow-x: hidden; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border: none; padding: 0; } button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: none; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search']::-webkit-search-decoration { -webkit-appearance: none; } [type='search'] { outline: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

(La etiqueta del button no se puede usar como contenedor flexible. En iOS, se romperá).

campo y leyenda


 fieldset { padding: 0; margin: 0; border: none; } legend { display: block; padding: 0; white-space: normal; }

A menudo se encontró que estos elementos semánticos de formas se usaban con fines decorativos.

Para esto:



Nunca haga esto , este es un ejemplo de la peor práctica. Aquí hay un par de ejemplos con una implementación normal:

→ Ejemplo 1 , ejemplo 2

(La etiqueta de conjunto de fieldset no se puede usar como contenedor flexible. Simplemente no funciona).

seleccione


Cancelamos la visualización estándar de select

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } select::-ms-expand { display: none; }

→ Hacemos seleccionar nosotros mismos: codepen

marcador de posición


 ::-webkit-input-placeholder { color: inherit; opacity: 1; transition: opacity .3s; } ::-moz-placeholder { color: inherit; opacity: 1; transition: opacity .3s; } :-moz-placeholder { color: inherit; opacity: 1; transition: opacity .3s; } :-ms-input-placeholder { color: inherit; opacity: 1; transition: opacity .3s; } :focus::-webkit-input-placeholder { opacity: 0; } :focus::-moz-placeholder { opacity: 0; } :focus:-moz-placeholder { opacity: 0; } :focus:-ms-input-placeholder { opacity: 0; }

El marcador de posición escuchará el color. Desaparece en foco.



svg (trabajar con iconos)


Aunque la etiqueta svg es una etiqueta completa que admite cualquier propiedad, siempre uso un contenedor para ello, que utilizo para establecer el tamaño y el color. Este enfoque es muy conveniente para trabajar con 2 tipos de sprites.

Te diré cómo trabajamos con íconos:

No utilizamos una fuente de icono.

Tenemos 2 tipos de íconos:

- color único
- color (iconos e imágenes pequeñas).

Todos ellos están en formato svg.

Para colores individuales, se usa un sprite svg, que se almacena por separado y se almacena en caché. Se ve así:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="search" viewBox="0 0 24 24"> <path></path> </symbol> </svg>

Y está incluido en la página así:

 <svg class="alert__ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use> </svg>

Y estilos para ello: ( este código se agrega al archivo )

 svg { display: block; width: 100%; height: 100%; fill: currentColor; }

Para el color se usa css sprite:

 .icon-ico-color:after { background-image: url("data:image/svg+xml,%3Csvg%20width%3D...; }

Y estilos para él:

 [class*='icon-']:after { content: ''; display: block; width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }

Cargando css sprite asincrónicamente

 <script> $(document).ready(function() { $("head").append("<link rel='stylesheet' type='text/css' href='../css/icons.min.css' />"); }) </script>

Esto es generado, por supuesto, por un galope.

Lo que da este enfoque

Para el ícono, se crea un contenedor del tamaño correcto y, independientemente de si el ícono es de color o no, encaja perfectamente en él.

 <div class="elem__ico"> <svg class="alert__ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprites/sprite.svg#search"></use> </svg> </div> <div class="elem__ico icon-ico-color"></div>



escondido


 [hidden] { display: none; // IE10 }

El atributo que oculta el elemento. Útil

: deshabilitado


 :disabled, .disabled { cursor: not-allowed; }

El cursor correcto. Como el enlace puede ser un botón en zag, la pseudoclase ya no funcionará, ya que el enlace no es un elemento de formulario. Para hacer esto, agregue una clase.



:: - ms-clear


Seudoelemento en la entrada de IE para borrar texto.

 ::-ms-clear { display: none; }

Lo quitamos.



: -webkit-autofill



 :-webkit-autofill { box-shadow: 0 0 100px #fff inset; -webkit-text-fill-color: currentColor; }

Usando la sombra interior, pinta este pseudo-elemento con el color deseado. Y hereda el color dado.

:: selección


 ::selection { color: #fff; background-color: #004fe4; }



Clases


.clearfix


 .clearfix:after { content: ''; display: block; clear: both; }

Aunque las flexiones ahora se están utilizando al máximo, uno no debe olvidarse de los flotadores, y aún más, no se olvide de limpiar el flujo de flotadores.

.visualmente oculto


 .visually-hidden { position: absolute; z-index: -1; width: 0; height: 0; padding: 0; margin: 0; border: none; overflow: hidden; }

Para semántica: cuando necesita ocultar el título, que debería ser , pero no está en el diseño. Esconderse de esta manera no es ignorado por el lector de pantalla.

Para personalizar el botón tsebox / radio:



Ocultar con display: none; o el atributo hidden es una mala idea, ya que la entrada pierde la capacidad de recibir el foco, y el foco (como sabemos) es importante.

Y si se oculta usando la clase .visually-hidden , entonces la entrada no pierde la capacidad de enfocarse .

El método de relleno inferior para imágenes (.cover-pic, .contain-pic.)


Al trabajar con imágenes, es decir, con una etiqueta

 <img>

hay algunas dificultades:

  • Si bien la imagen no se ha cargado, no tiene altura, lo que generalmente provoca sacudidas del diseño durante la carga.
  • Si la imagen no se carga, el diseño puede romperse.
  • Tamaños y proporciones inapropiadas de imágenes.

El método de relleno inferior es ideal para resolver estos problemas. El control del tamaño de la imagen se realiza a través de un contenedor.

 <div class="img-wrap"> <img src="" alt=""> </div>

Pero no puede simplemente establecer la altura del contenedor o la imagen, porque cuando recorte la página, se perderán las proporciones necesarias.

Y para que esto no suceda, la altura se establece debido al relleno en% para el pseudo-elemento del contenedor ( : antes ). Como sabe, el relleno en% toma el valor del ancho del elemento primario , los valores verticales u horizontales se establecen de forma independiente.

(el relleno en% se muestra incorrectamente en los cerebros si está configurado para flexionar un elemento).

 .img-wrap { position: relative; width: 30%; } .img-wrap:before { content: ''; display: block; padding-bottom: 60%; }

La imagen en sí misma debe colocarse absolutamente en relación con el contenedor. Cuando es necesario que la imagen ocupe todo el espacio (similar al tamaño del fondo: portada;). Se utiliza la clase .cover-pic.

 .cover-pic, .contain-pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cover-pic { object-fit: cover; } .contain-pic { object-fit: contain; }

Cuando es necesario que la imagen no ocupe todo el espacio (similar al tamaño de fondo: contener;). Se utiliza la clase .contain-pic.

El resultado es:

  • La imagen está recubierta de goma.
  • Tiene las proporciones necesarias (establecidas por diseño).
  • No sacude contenido al cargar.

Entre las deficiencias: soporte para IE de object-fit de object-fit . Porque tienes que usar un polifilo .

Las imágenes se instalan en el instagram utilizando el mismo método, solo que se cortan en la forma deseada y la necesidad de ajuste de objetos desaparece.
→ Ejemplo

Prensatelas


 html { height: 100%; } body { display: flex; flex-direction: column; min-height: 100%; } .footer-page { margin-top: auto; }

Arreglo al presionar el pie de página para IE. En un bloque con altura mínima (que en este caso es el cuerpo), la flexión no funciona correctamente.

 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { html { display: flex; flex-direction: column; } }

Arriba está una de las formas más óptimas. Presionar usando tablas y cuadrículas tampoco requiere conocer la altura del pie de página, pero el método de tabla de alguna manera no es aceptado (y un poco inconveniente) para usar, y las cuadrículas no son muy cruzadas.

→ Codepen


Entonces, ¿por qué no restablecer o normalizar? No pueden preparar completamente el proyecto, en cualquier caso, tienen que terminar mucho y, por lo tanto, casi todos los diseñadores tienen sus propias ideas.

Gracias por leer mi artículo, espero que te sea útil. Preguntas y sugerencias, ideas y comentarios son bienvenidos.

PD: le aconsejo que lea la publicación Organización de la sangría en el diseño (margen / relleno) . Y te aconsejo que uses linters css. Y a quién le importa, puede resolver el rompecabezas CSS .

Source: https://habr.com/ru/post/es420539/

More articles:


All Articles