Prefijos específicos del navegador. ¿Razones de la aparición de prefijos? Como distinguirlos

Hay muchas formas de comprimir un archivo CSS o generar automáticamente prefijos de navegador para CSS3. Normalmente, resolver este problema requiere una utilidad adicional, cuyo uso puede resultar bastante incómodo. En este tutorial veremos cómo se puede resolver una tarea de este tipo utilizando PHP.

Veamos tres preguntas:

• Genere propiedades CSS3 con prefijos del navegador para no tener que tratar con ellas manualmente.
• Concatene archivos CSS y elimine comentarios y espacios en blanco adicionales para reducir la cantidad de solicitudes al servidor y mejorar el tiempo de carga de la página.
• Ejecute los procesos anteriores cuando se solicite una página.

Pongamos un ejemplo que muestra lo fácil que es utilizar el resultado de nuestra lección.

El archivo CSS utiliza guiones bajos en lugar de prefijos:

Radio del borde: 10 px;

El código del script generará una lista completa de propiedades con prefijos:

Radio del borde O: 10 px; -moz-border-radio: 10px; -webkit-border-radio: 10px; radio del borde: 10px;

Una etiqueta de enlace carga tres archivos CSS a la vez. El script css.php lee los archivos listados (css_file1.css, css_file2.css y css_file3.css), los combina y devuelve un solo archivo.

Ahora veamos cómo funciona el guión.

Escribir código

Cree un archivo css.php con el siguiente código:

El script primero obtiene la lista de archivos CSS para procesar como una cadena del parámetro URL (disponible en PHP como $_GET["f"]). Cada archivo está separado por una barra vertical. La función explotar() divide una cadena en el carácter de barra vertical y devuelve una matriz de nombres de archivos.

La función file_get_contents() obtiene el contenido de cada archivo, uno por uno, y los agregamos a la variable $contents.

Una vez recuperado el contenido de los archivos CSS, comienza una búsqueda de propiedades que comienzan con un guión bajo, que se reemplaza con el prefijo del navegador. La función preg_match_all() encuentra todas las partes del texto que coinciden con la expresión regular y las coloca como una matriz en $matches.

La figura describe el patrón de la expresión regular:

La matriz $prefixes contiene prefijos del navegador. Puedes agregar o quitar lo que necesites. Cada propiedad en $matches se transformará en un conjunto de propiedades CSS3 con prefijos de navegador. El código procesa cada propiedad y crea un búfer de resultados reemplazando el guión bajo de la propiedad con el siguiente prefijo y luego reemplazando la propiedad original con el contenido del búfer.

Después de agregar prefijos del navegador y devolver propiedades a $contents, el script recorta los comentarios en el contenido para reducir el tamaño. La siguiente figura describe la expresión regular correspondiente.

Luego se utiliza otra expresión regular para eliminar espacios y nuevas líneas innecesarios.

Las propiedades que coincidan con la expresión regular se comprimirán mucho:

El resultado en la variable $contents es un archivo CSS listo para ser enviado. La primera llamada a la función header() informa al navegador que la información transmitida debe tratarse como un archivo CSS. La segunda llamada a header() le dice al navegador que el archivo es válido durante una hora, de modo que el navegador colocará una copia en su caché y no volverá a solicitar el archivo al servidor.

Usando el guión

Demos un ejemplo simple del uso de nuestro script. Coloquemos el archivo css.php en el directorio css de su proyecto junto con tres archivos CSS.

Primer archivo header.css:

#header (ancho: 800px; alto: 100px; relleno: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; fondo: _linear-gradient(#D30000, #3D0000); )

El segundo archivo es center.css:

#center ( ancho: 800px; alto: 400px; relleno: 20px; margen: 20px 0px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; fondo: _linear-gradient(#8ED300, #213D00); )

El tercer archivo es footer.css:

#pie de página (ancho: 800 px; alto: 100 px; relleno: 20 px; _border-radius: 10 px; _box-shadow: 0px 0px 10 px #000000; fondo: _linear-gradient(#006ED3, #00203D); )

Observe cómo se escriben las propiedades de CSS3. Aquellos que requieren prefijos de navegador se definen sólo una vez con un guión bajo antes del nombre.

Ahora creamos un archivo index.html que usa estos estilos.

Observe el atributo href en la etiqueta del enlace. Cada archivo CSS está separado por una barra vertical.

Conclusión

Este tutorial muestra algunas manipulaciones básicas de CSS usando PHP. El script se basa en el uso de expresiones regulares, una poderosa herramienta para la manipulación de cadenas. El código resultó ser muy simple, pero bastante efectivo.

Prefijos específicos del navegador

Se mencionó anteriormente que la especificación CSS3 es un conjunto de módulos que los fabricantes de navegadores están integrando gradualmente. A veces la integración incluye apoyo experimental. Esto significa que mientras la especificación se escribe, discute y critica en el W3C, el fabricante del navegador puede decidir agregar soporte para algunas funciones para probar en la práctica. Recientemente, esta práctica se ha convertido en una parte natural del proceso y la retroalimentación obtenida durante el uso experimental se utiliza a menudo para modificar la especificación.

Por otro lado, un fabricante de navegadores puede querer introducir una característica experimental que no esté incluida en ningún estándar propuesto pero que algún día pueda alcanzar ese estatus.

A menudo se introducen prefijos de navegador para proporcionar soporte experimental para propiedades CSS, como por ejemplo:

– webkit – radio-borde

Una palabra clave con guión que precede al nombre de una propiedad la marca como trabajo en progreso, perteneciente únicamente a la implementación e interpretación por parte del navegador de la especificación en evolución. Si la propiedad experimental se va a incluir en un módulo CSS3 terminado, el navegador debe admitir un nombre de propiedad sin prefijo.

Cada fabricante de navegadores tiene su propio prefijo, que utilizan principalmente para marcar sus propias propiedades experimentales. Todos los demás navegadores ignoran las reglas que contienen prefijos que no conocen.

En mesa 1.03 enumera los navegadores más utilizados y sus prefijos asociados. Usaremos los prefijos WebKit, Mozilla y Opera para CSS3 en los ejemplos de los siguientes capítulos.

D. Siderholm. "CSS3 para diseñadores web"

Tabla 1.03. Navegadores más utilizados y prefijos asociados

Cómo funcionan los prefijos del navegador

Así es como funciona CSS en la práctica con los prefijos del navegador. Tomemos como ejemplo la propiedad border-radius. Digamos que queremos redondear las esquinas de un elemento con un radio de 10 píxeles; así es como se hace:

– webkit-border-radius: 10px;

– radio-borde-moz: 10px; radio del borde: 10px;

Webkit (el motor utilizado en Chrome, Safari y Safari para navegadores móviles)

dispositivos) y Gecko (el motor del navegador Firefox) admiten la propiedad border-radius a través de sus propias propiedades de prefijo; Opera admite esta propiedad sin prefijo. IE9 también admitirá border-radius sin el prefijo del navegador.

En el momento de escribir este artículo (agosto de 2012), todos los navegadores mencionados admiten la propiedad border-radius sin prefijo, incluido IE9. ed.

Orden óptimo

Al utilizar prefijos del navegador, es importante tener en cuenta el orden en que se enumeran las propiedades. Puede observar que en el ejemplo anterior, las propiedades del prefijo se escriben primero, seguidas de la propiedad sin prefijo.

D. Siderholm. "CSS3 para diseñadores web"

¿Por qué poner una propiedad CSS3 genuina al final? Es probable que sus archivos de estilo funcionen en más navegadores en el futuro, mejorando gradualmente el diseño. Cuando un navegador finalmente soporte una propiedad que está definida en la especificación, se aplicará la propiedad real, no la versión experimental, ya que será la última de la lista. Incluso si la implementación de la versión del prefijo difiere de la propiedad real en la especificación, usted se asegura de que el estándar final siga siendo primordial.

¡No te asustes por los prefijos del navegador!

La reacción inicial del lector podría ser algo así como: "¡Oh, esto es algo confuso y exclusivo!". Pero les aseguro que esto no es sólo un paso adelante, sino también una solución mucho menos confusa en comparación con los fragmentos de código inflados y la falta de flexibilidad que vienen con las soluciones que no son CSS3. También es una parte importante del desarrollo de la especificación.

Al utilizar estas propiedades ahora a través de los prefijos del navegador, podemos probar las aguas e incluso proporcionar comentarios valiosos a los proveedores de navegadores antes de finalizar la especificación. También vale la pena recordar que los prefijos generalmente se agregan a los estándares propuestos.

(y no a los aprobados). Este es un gran cambio con respecto a los diversos trucos de CSS que todos hemos usado en ocasiones para resolver problemas entre navegadores.

Se podrían comparar los prefijos del navegador con exploits de sintaxis que muchos de nosotros hemos tenido que usar para dar un comando a versiones específicas de navegadores (por ejemplo, la sintaxis w\idth: 200px o_width: 200px, que le permite apuntar a una versión específica de IE ). Pero, por el contrario, los prefijos del navegador son una parte importante del proceso de estandarización, permitiendo el desarrollo de una propiedad, introduciéndola para un uso práctico.

Eric Meyer, un experto en CSS, explica la diferencia en el artículo "Prefix vs. Posthack" en

Una lista aparte (http://bkaprt.com/css3/2/)3:

Los prefijos nos dan control sobre nuestro destino de hacker. En el pasado, tuvimos que inventar un montón de errores en el analizador sólo para que las implementaciones incompatibles funcionaran igual, cuando descubrimos que eran incompatibles. Fue un enfoque completamente reaccionario. Los prefijos son un enfoque con visión de futuro.

Continúa sugiriendo que los prefijos no sólo son una buena práctica, sino que también deberían desempeñar un papel más importante en el proceso de estandarización:

...conseguir que los proveedores de navegadores y el grupo de trabajo trabajen juntos para desarrollar las pruebas necesarias para probar la interoperabilidad. Estas pruebas pueden ayudar a aquellos (desarrolladores de navegadores) que siguen a los demás a lograr la interoperabilidad mucho más rápido. Literalmente pueden implementar una implementación con un prefijo en una versión beta pública y eliminar el prefijo en la siguiente versión.

3 http://www.alistapart.com/articles/prefix-or-posthack/

D. Siderholm. "CSS3 para diseñadores web"

Así que no te preocupes por los prefijos del navegador. Utilízalos sabiendo que estás formando parte de un proceso que logra resultados ahora y allana el camino para un futuro en el que se puedan eliminar los prefijos.

¿Qué pasa con las repeticiones?

Se podría pensar que es bastante estúpido repetir tres o cuatro veces lo que parece la misma propiedad, y estoy de acuerdo.

Pero la realidad es que las soluciones creadas con CSS3 probablemente requerirán que escriba código que sea inflexible y más complejo, aunque quizás no repetitivo.

No necesitaremos repetirnos para siempre. Este es ahora un paso necesario pero temporal para separar las implementaciones que difieren entre los navegadores de la implementación de la especificación final.

Antes de comenzar a hacer cosas interesantes con algunas propiedades CSS3 aplicables y los prefijos de navegador correspondientes, echemos un vistazo a las transiciones en CSS. Comprender las transiciones y cómo funcionan nos ayudará a combinarlas con otras propiedades y crear excelentes interacciones.

Prefijos específicos del navegador