{"id":1489,"date":"2018-07-04T13:07:58","date_gmt":"2018-07-04T18:07:58","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=1489"},"modified":"2018-07-04T13:44:53","modified_gmt":"2018-07-04T18:44:53","slug":"normalizar-css-con-normalize-y-modernizr","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/normalizar-css-con-normalize-y-modernizr\/","title":{"rendered":"Normalizar CSS con normalize y compatibilizar navegadores con modernizr"},"content":{"rendered":"

\u00bfQu\u00e9 es normalizar CSS? \u00bfPor qu\u00e9 es importante? En esta entrada aprenderemos a descargar y utilizar Normalize. Adem\u00e1s veremos su diferencia con Modernizr.<\/strong><\/em><\/p>\n

<\/p>\n

El CSS del dise\u00f1ador no es el \u00fanico CSS que se est\u00e1 ejecutando, el navegador incluye sus propios estilos CSS. Lo puedes ver cuando escribes una etiqueta H1 y otra H2. El H1 tendr\u00e1 un tama\u00f1o m\u00e1s grande, \u00bfverdad? \u00bfQui\u00e9n determin\u00f3 ese cambio de tama\u00f1os? El navegador aplic\u00f3 autom\u00e1ticamente estilos CSS. Ahora bien, no todos los navegadores tienen los mismos estilos CSS entre ellos.\u00a0 <\/span>Incluso el usuario del sitio puede cambiar el CSS de una p\u00e1gina, pueden, por ejemplo, cambiar el tama\u00f1o de la letra o los colores de los v\u00ednculos a trav\u00e9s de la configuraci\u00f3n de su propio navegador.\u00a0<\/span><\/p>\n

Esto crea algunos conflictos, pues una p\u00e1gina pudiera llegar a verse de una forma en un navegador y de otra forma en otro, aunque tengan el mismo CSS y el mismo HTML.<\/p>\n

Normalizar CSS<\/h2>\n

Los normalizadores regulan las caracteristicas que pueden verse afectadas por las diferencias entre navegadores. Existen varias formas de normalizar CSS, como es Reset y como es Normalize.<\/p>\n

Nosotros vamos a utilizar Normalize. Vamos a la p\u00e1gina del autor de Normalize y damos clic en Download<\/p>\n

https:\/\/necolas.github.io\/normalize.css\/<\/a><\/p>\n

\"Normalize<\/a>

Normalize para normalizar CSS<\/p><\/div>\n

Al darle en Descargar<\/strong> veremos c\u00f3digo CSS, los guardamos en un archivo al que nombraremos normalize.css<\/em>.<\/p>\n

Ahora enlazamos el archivo normalize.css<\/em> en el HTML. El enlace a normalize.css<\/em> se debe colocar antes del enlace a mi estilo.css para que se cargue antes.<\/p>\n

Vamos a utilizar el ejemplo visto en la entrada anterior:\u00a0CSS en 1 minuto: introducci\u00f3n a las hojas de estilo en cascada<\/p>\n

\t<link rel= \"stylesheet\" href=\"normalize.css\">\r\n\t<link rel=\"stylesheet\"  href=\"estilo.css\"><\/pre>\n
 <\/p>\n
Es muy importante antes de utilizar cualquier CSS propio normalizar CSS usando normalize o cualquier otro normalizador.<\/p>\n
Veamos la demostraci\u00f3n de uso de normalize: En la primera im\u00e1gen vemos nuestro archivo original sin normalize (el que hicimos en la entrada anterior). Observamos que el navegador autom\u00e1ticamente asigna unos peque\u00f1os bordes blancos alrededor de nuestro header oscuro.\u00a0 <\/span>En la segunda imagen vemos el archivo utilizando normalize y esos bordes han desaparecido. Hemos logrado normalizar CSS.\u00a0<\/span><\/p>\n
\"Sin<\/a>
Sin utilizar normalize<\/p><\/div>\n
\"\"<\/a><\/p>\n
Compatibilizar navegadores usando Modernizr<\/h2>\n
No todas las propiedades CSS se implementan del mismo modo en diferentes versiones de los navegadores. Cada navegador tiene un motor interno diferente. Actualmente la versi\u00f3n de CSS es la 3 que tiene algunas funciones que versiones anteriores de navegadores no soportan (por ejemplo, algunas animaciones).\u00a0<\/span><\/p>\n
Para resolver esos problemas estan los compatibilizadores como modernizr.<\/p>\n
Modernizr se encarga de resolver cualquier incompatibilidad entre las diferentes versiones de navegadores.\u00a0<\/span><\/p>\n
La direcci\u00f3n para descargar es la siguiente: https:\/\/modernizr.com<\/a><\/p>\n
Si vas a la secci\u00f3n de Download ver\u00e1s una lista muy larga de opciones que modernizr puede compatibilizar. No \u00fanicamente CSS sino cualquier otro c\u00f3digo de HTML5 y otras funciones que son modernas. Marcamos las opciones que deseamos asegurarnos que vayan a funcionar, por ejemplo, transiciones, gradientes, opacidad, etc. Marcamos y pulsamos en Build y nos descargar\u00e1 un JS con esas caracter\u00edsticas compatibilizadas.<\/p>\n
Luego, vamos a enlazar ese archivo a nuestro HTML<\/p>\n
\"Uso<\/a>
Selecciona las opciones que deseas compatibilizar<\/p><\/div>\n
A\u00f1adimos el siguiente c\u00f3digo a la secci\u00f3n Head de nuestro HTML<\/p>\n
\t<script src=\"modernizr-custom.js\"><\/script><\/pre>\n
Prefijos<\/h2>\n
CSS tiene funciones nuevas que no todos los navegadores entienden a la primera. Por ejemplo, un gradiente se maneja asi:<\/p>\n
background: linear-gradient(  top, #000 0%,  #fff 100%);<\/pre>\n
Le estamos indicando que el background o color de fondo del header ser\u00e1 un gradiente que ir\u00e1 de negro a blanco de arriba hacia abajo.<\/p>\n
Sin embargo, si ejecutas ese estilo ver\u00e1s que no aparece el gradiente. Esto es porque mi navegador (en este caso Safari) no reconoce la instrucci\u00f3n linear-gradient<\/em>. Algo similar ocurrir\u00e1 con Chrome. Para estos casos se requiere el uso de los prefijos. Los prefijos son los siguientes:<\/p>\n
–webkit<\/strong>– \u00a0 se usa en\u00a0<\/span>Chrome, Safari, Navegador Android<\/p>\n
–moz<\/strong>– \u00a0 se usa en\u00a0<\/span>Firefox<\/p>\n
–o<\/strong>– \u00a0 \u00a0 se usa en\u00a0<\/span>Opera<\/p>\n
–ms<\/strong>– \u00a0se usa en\u00a0<\/span>Internet Explorer, Edge<\/p>\n
–khtml<\/strong>–\u00a0 se usa en\u00a0<\/span>konqueror<\/p>\n
En nuestro caso, para probarlo en Safari (o Chrome) la linea quedar\u00eda asi:<\/p>\n
background: -webkit-linear-gradient(  top, #000 0%,  #fff 100%);<\/pre>\n
 <\/p>\n
Y vemos que funciona correctamente:<\/p>\n
\"Un<\/a>
Un gradiente usando el prefijo -webkit-<\/p><\/div>\n
Sugerencia de recurso<\/strong>:\u00a0https:\/\/caniuse.com<\/a>\u00a0\u00bfPuedo usarlo? Es un sitio donde escribimos una instrucci\u00f3n (por ejemplo, gradient) y nos indica qu\u00e9 navegadores y en qu\u00e9 versiones es soportado o no es soportado.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00bfQu\u00e9 es normalizar CSS? \u00bfPor qu\u00e9 es importante? En esta entrada aprenderemos a descargar y utilizar Normalize. Adem\u00e1s veremos su diferencia con Modernizr.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[171],"tags":[233,161,48],"class_list":["post-1489","post","type-post","status-publish","format-standard","hentry","category-programacion-web","tag-css","tag-diseno-web","tag-programacion-web"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1489"}],"version-history":[{"count":13,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1489\/revisions"}],"predecessor-version":[{"id":1509,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1489\/revisions\/1509"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}