Haga su trabajo css 3 a través de navegadores web

Si usted está diseñando su sitio web para el escritorio, así como para el iPhone y el iPad, puede seguir utilizando el CSS experimental 3! Finalmente, el CSS 3 en su sitio probablemente será apoyado. El ejemplo de esta sección muestra cómo cubrir sus apuestas para el futuro.

Para cualquiera de los -webkit- ejemplos de código (que cubren versiones queridos Safari 3 y 4), crean otra regla CSS idéntico -moz- para cubrir Firefox y gobierno de un solo CSS con sólo el nombre de la raíz para cubrir los nuevos navegadores: Opera 10.5, Internet Explorer 9, Safari 5, Chrome y navegadores futuros.

He aquí un ejemplo de un conjunto de reglas para redondear las esquinas de un cuadro:

-webkit-border-radius: 12px; / * Saf3-4 * / - moz-border-radius: 12px; / * FF1 + * / border-radius: 12px; / * Opera 10.5, IE 9, Saf5, Chrome * /

Las nuevas etiquetas semánticas en HTML5 funcionan bien en Safari en el iPhone y el iPad, pero no en la mayoría de los navegadores web más viejos todavía comunes en la web. Para que estos nuevos elementos funcionan en navegadores antiguos, todo lo que tienes que hacer es establecer las reglas de estilo para visualización a bloque para definir las etiquetas semánticas como elementos en bloque. Esta acción hace que actúan como

etiquetas en navegadores antiguos.

Debido a que no todos los navegadores interpretan HTML y CSS de la misma manera, muchos desarrolladores web comienzan el diseño de páginas mediante la creación de estilos que eliminan cualquier frontera, relleno, o los márgenes incluidos en una etiqueta HTML mediante la definición de un estilo que establece los valores de 0 (como se ve en el siguiente ejemplo).

El proceso de elementos restablecer ayuda a asegurar que los estilos que cree se mostrarán de manera más consistente a través de diferentes navegadores web ya que todas sus etiquetas comienzan con la misma hoja en blanco. Es una buena práctica para Safari en el iPad y el iPhone, y para otros navegadores.

En este ejemplo, el visualización se establece en bloque y establecer simultáneamente el frontera, relleno, y margen a 0, para asegurar una visualización más consistente a través de diferentes navegadores web:

artículo, a un lado, pie de página, encabezado, menú, navegación, sección, detalles, tabla, cuerpo, h1, h2, h3, p, ul, li, {border: 0- margen: 0- padding: 0-pantalla: bloqueantes}

Sobre el autor

Soporte CSS3 y navegador

El estado actual de las normas para la compatibilidad con exploradores web para efectos CSS3 y transformaciones es en flujo. Lo más probable, con el tiempo los poderes fácticos estar en el mundo del navegador - quienes publican Internet Explorer,…

Cómo agregar varias imágenes de fondo y rotar objetos con css3

Con CSS3, puede agregar fácilmente como muchas imágenes de fondo a cualquier elemento a su gusto. También puede rotar las imágenes. La ilustración muestra un ejemplo de un recipiente con tres imágenes de fondo, un patrón, y dos archivos PNG…

Cómo aplicar el efecto de la frontera de radio css3

El efecto CSS3 border-radius define esquinas redondeadas. Y, es necesario utilizar prefijos específicas del navegador cuando se define un radio de frontera. Aquí algunas reglas para la definición de un radio de frontera:No se puede aplicar un…

Cómo redondear los bordes y crear varias columnas con css3

En lugar de tener que utilizar hasta cuatro imágenes separadas para dar la ilusión de una forma curvada en su sitio web, con CSS3 ahora puede crear contenedores con esquinas curvas! Aquí está el código, que cuenta con la declaración de CSS3…

¿Cómo trabajar con los selectores CSS3

A mediados de 2010, los diseñadores y desarrolladores web se regocijaron como CSS3 comenzó a hacer su camino en la corriente principal. Desde entonces, el apoyo del navegador para CSS3 ha aumentado y mejorado constantemente, a pesar de CSS3 aún…

Crear un marco adaptable con html5

Antes de crear un marco para un sitio web que se mostrará en el iPhone y el iPad, es útil pensar en el futuro acerca de cómo desea que sus páginas se ven cuando se agrega los estilos. Aquí es donde wireframes pueden realmente ayudar.En las…

Diseño para el safari y navegadores cromo

Safari y Chrome son los navegadores WebKit, basado en el mismo WebKit desgarrarering motor, que controla cómo el navegador interpreta HTML, CSS y otros códigos. Todos los navegadores WebKit siguen las mismas reglas (por lo menos la mayor parte del…

Visualizar nuevo código html5 en muchos navegadores

Cuando te enfocas un diseño en el iPhone, iPod touch o iPad, usted tiene la ventaja de saber que sus visitantes van a utilizar el navegador web Safari. Se basa en el motor de renderizado WebKit, que puede rendir CSS 3, así como cualquier lata…

Cómo diseñar para diferentes navegadores web

Aunque su público puede ser diferente, puede crear sitios web que se ven bien en Safari en el iPhone y el iPad, sin comprometer el diseño de la página cuando se ve en cualquiera de los navegadores web más populares en Internet.Si usted desea…

Cómo el estilo de texto con CSS 3

Al crear CSS 3 para un sitio iPhone o el iPad, no sólo disfrutar de los beneficios de fuentes personalizadas y colocar sombras, sino también ganar el reto de dimensionamiento de texto en pantallas con diferentes dimensiones. No te preocupes más:…

Hacer css 3 trabajos en más navegadores web

Si desea utilizar HTML5 y CSS 3 en el diseño de su sitio web, usted debe saber que tanto HTML5 y CSS 3 son todavía en desarrollo. La especificación CSS aún no ha sido aprobado por el W3C, pero muchos desarrolladores de navegadores ya han…

Mover a HTML5 y CSS 3 para el diseño web

Cuando se planifica un nuevo diseño web, recuerde que muchas versiones diferentes de HTML están ahora en uso en la web. Todas las versiones más recientes trabajar en el (sistema operativo de Apple en el iPhone y el iPad) iOS, así que tienes que…

maniqui-es.com » Los medios de comunicación de Internet y sociales » Diseño y desarrollo web » IPhone & iPad diseño web » Haga su trabajo css 3 a través de navegadores web