Share
CSS es un lenguaje relativamente simple de aprender. Dominarlo, por otro lado, puede resultar un poco más difícil. La compensación de varias inconsistencias del navegador solo puede producir una migraña. En este artículo, desmitificaremos cinco de los problemas más problemáticos que encontrará al crear aplicaciones web..
Todos hemos hecho esto. Piensas: "Vaya, este texto se vería genial si fuera rojo brillante". (¿En serio?) Desafortunadamente, cuando agrega el estilo necesario, su texto permanece en negro. Cómo?
Podría haber un par de razones por las que tus estilos no están teniendo efecto. No hace falta decir que puede ser un problema desagradable, especialmente para los desarrolladores principiantes de CSS. Primero, haga una visita a su archivo CSS y asegúrese de que no haya errores tipográficos. He perdido muchas horas desmantelando mis documentos solo para encontrar que escribí mal una palabra. Pero, si no te has golpeado la cabeza contra la pared en un momento u otro, ¡no puedes llamarte desarrollador web! Lo más probable es que estés tratando con un problema de especificidad. Intenta agregar "!importante"junto al estilo que no está surtiendo efecto. Si de repente funciona, eso significa que definitivamente tiene un problema de" peso ". Como cuestión de buenas prácticas, nunca deje"! important "en ninguna parte de su hoja de estilo. Simplemente utilícelo como una forma de depuración. Considere el siguiente ejemplo:
#wrap #myStyle color: negro;
Debido a que hay una mayor especificidad aquí, el color seguirá siendo negro. Al incluir el identificador adicional, "#wrap", hay más peso en este selector. En consecuencia, el primer estilo será descartado a favor de éste..
¿Cómo podemos resolver este problema?? Primero debe verificar si el segundo estilo se puede borrar completamente. Si no puede, simplemente deberá agregar más especificidad a su selector original. Repasaremos el concepto de especificidad "con mucho mayor detalle en breve. Intentemos agregar:
#wrap p # myStyle color: rojo;
Ahora, el texto finalmente se pondrá rojo. Al agregar el selector de "p" adicional, hemos agregado un punto más, por lo tanto, anulando cualquier otro estilo.
Tal vez más que cualquier otra cosa, el posicionamiento puede llegar a ser un tema innecesariamente confuso para los diseñadores de CSS intermedios e intermedios. La mejor manera de aprender es abordar primero el posicionamiento absoluto. Supongamos que tenemos un documento html y CSS en blanco. Si tuviéramos que colocar una imagen absolutamente en la página, digamos 100px desde arriba y 100px desde la izquierda de los bordes de la ventana, podríamos escribir el siguiente estilo ...
img posición: absoluta; superior: 100px; izquierda: 100px;
Los elementos posicionados de manera absoluta se colocan en relación con sus elementos primarios posicionados más cercanos. En este caso, donde no hay elementos relativamente posicionados en la página, la imagen se posicionará en relación con la ventana..
Ahora, imagina que envolvimos una división relativamente posicionada alrededor de nuestra imagen..
Para establecer un contexto de posicionamiento, debemos agregar "posición: relativo" al estilo de nuestro div padre.
div # wrapper posición: relativo; fondo: gris; / * Solo para ver los bordes. * / Altura: 600px; / * Debido a que la imagen está absolutamente posicionada, necesitamos forzar la altura. * / Width: 770px; margen: auto;
Ahora, cuando posicionamos absolutamente la imagen, se posicionará "relativa" a la división "wrapper". Tenga en cuenta que si eliminamos esta propiedad, la imagen se colocará una vez más en relación con la ventana del navegador. La propiedad "posición" es clave aquí.
Chris Coyier repasa algunos ejemplos prácticos que muestran exactamente cómo y cuándo usar el posicionamiento. Incluye una demo y un código fuente descargable..
Visita el artículo
"Vamos a arrojar algo de luz sobre los misterios sombríos del posicionamiento CSS. Si tus habilidades de CSS son limitadas o incluso moderadas, aprenderás lo que necesitas para dominar el posicionamiento".
Visita el artículo
Para aquellos que no están familiarizados con el "Error de doble margen", si flota un elemento y luego continúa agregando márgenes en la misma dirección que el flotador, Internet Explorer 6 duplicará incorrectamente el valor. En efecto, un margen izquierdo de "100px" se convierte en "200px" en IE6. Hay tres remedios diferentes que revisaremos.
Cambiar la pantalla a Inline. La solución más simple, descubierta por Steve Clason, es cambiar la propiedad de visualización de su elemento.
#floatElement display: inline; flotador izquierdo; margen izquierdo: 100px;
Usar comentarios condicionales. Afortunadamente, cambiar la pantalla solucionará ese desagradable error. Sin embargo, ¿qué pasa si, por alguna razón, necesitas un método diferente? Internet Explorer le permite apuntar a diferentes versiones del navegador usando "comentarios condicionales". Agregue lo siguiente en la etiqueta principal de su documento:
En términos sencillos, este código dice: "Si un visitante de su página usa Internet Explorer 6 o una versión inferior, importe una hoja de estilo llamada" ie6.css ". Como resultado, los navegadores modernos ignorarán esta afirmación. IE 6 y siguientes por otro lado, implementará el archivo. Ahora, en nuestro archivo ie6.css, tendremos que agregar algunos estilos de anulación.
#floatElement float: left; margen izquierdo: 50px;
Como sabemos que IE 6 duplicará los márgenes en elementos flotantes, si reducimos el valor del margen en un 50%, arreglará nuestro documento. Este método es particularmente apropiado cuando tiene muchos estilos que están dirigidos directamente a IE6. Es importante que contenga todos sus "hacks" en una ubicación centralizada.
Implementar The Underscore Hack. Hay muchas maneras de apuntar a versiones anteriores de Internet Explorer directamente desde nuestra hoja de estilo principal. En general, prefiero usar comentarios condicionales. Sin embargo, si solo necesito cambiar una propiedad, muchas veces usaré el guión de subrayado. Considera lo siguiente:
#floatElement float: left; margen izquierdo: 100px; _margin-left: 50px;
Los navegadores modernos recorrerán estas propiedades. Cuando lleguen al subrayado, omitirán el estilo por completo. Por otro lado, IE6 ignorará el subrayado e implementará los nuevos márgenes. Lo que terminamos es con los navegadores modernos que agregan "100px" al margen izquierdo. IE 6, respectivamente, agregará solo "50px".
Dustin ofrece una explicación rápida para superar este error. Asegúrese de revisar sus tutoriales relacionados también.
Visita el artículo
Asegúrese de revisar este artículo fácil de leer si todavía está algo confundido.
Visita el artículo
¡Absolutamente! Sin embargo, muy pocas personas conocen la ecuación exacta. Muchos de ustedes probablemente usen el método "seguir agregando más identificadores hasta que funcione". En términos prácticos, esto funcionará bien. Sin embargo, debe saber cómo calcular el peso de sus selectores sin embargo..
Primero, asociemos cada tipo de selector con un valor.
Vamos a tratar de calcular el peso del siguiente estilo ...
body #wrap div # sidebar ul li a.selected styling random ...
Refiriéndonos a nuestra calculadora anterior, analizaremos este selector. El elemento cuerpo recibe un punto. A continuación, tenemos un identificador (#wrap). Esto agregará 100 puntos a la cuenta. Continuando, tenemos "div # sidebar". ¿Cuántos puntos crees que vale esto? Si adivinaste 100 puntos, serías incorrecto. Debes tener en cuenta el elemento "div" en tu peso. La respuesta correcta es de 101 puntos. Los elementos "ul", "li" y "a" ganan un punto por pieza. Por último, la clase "seleccionada" recibe 10 puntos adicionales. Sumando todo, llegamos a una suma de 215.
Te recomiendo que pases unos minutos y memorices este sistema de puntos. Te ahorrará una gran cantidad de tiempo perdido cuando te encuentres en un dilema de especificidad!
Para una explicación detallada de la especificidad, le recomiendo que lea este artículo de arriba a abajo..
Visita el artículo
Aprende el arte de la especificidad en un divertido entorno de "Star Wars". Esta es una lectura obligada.
Visita el artículo
Un paso necesario cuando está trabajando en un sitio es revisarlo en todos los navegadores modernos: Firefox, Internet Explorer, Safari y Opera. El segundo paso es probar tu sitio en una versión anterior de IE. Le recomiendo que descargue IE Tester, que le permitirá ver su sitio en IE 5 - IE 8. El último paso es verificar todos los navegadores menos comunes. Visite BrowserShots.org para ver instantáneas de su sitio en cada navegador disponible.
¿Odias tener que cambiar entre IE y Firefox al probar tu sitio? ¿Por qué no descargar IE Tab??
Visita el artículo
¿Alguna pregunta confusa que me haya perdido? Estoy seguro de que hay muchos. Deja un comentario y trataré de incorporarlos en la segunda parte. Espero convertir estos artículos de estilo de "Preguntas y respuestas" en una serie en curso.
Accentsconagua
