jueves, 28 de noviembre de 2013

Cómo ajustar el Margen CSS por sólo Webkit

Webkit puede sonar como un paquete de reparación de Internet, pero en realidad es el nombre del motor de renderizado que alimenta el Google Chrome y Safari. Estos navegadores se aprovechan de funciones mejoradas incluidas en CSS3. Los desarrolladores que utilizan hojas de estilo pueden dirigirse a varios atributos del navegador que se aplican sólo a los navegadores que usan WebKit. Si la aplicación Web necesita para ajustar los valores de margen en los navegadores WebKit, agregue un-webkit-margin-inicio atributo para el código CSS.

Abre tu editor de HTML o Bloc de notas;



Pegue la siguiente declaración en la sección del cuerpo del documento:

h1 class = "webkitTest" Se trata de un título / h1

Esto crea un título que hace referencia a una clase CSS llamado "webkitTest."



Copie el texto siguiente y péguelo en la sección de cabecera del documento:

estilo

. WebkitTest {

: "-Webkit-margin-start: 60px;

}

/ Estilo

Esto crea la clase "webkitTest". Tenga en cuenta el atributo llamado "-webkit-margin-inicio." Este atributo establece el margen de partida para los navegadores que usan WebKit. El valor del atributo "60px", le dice al navegador para colocar cualquier elemento que hace referencia a la clase 60 píxeles desde el borde izquierdo del contenedor primario. En este ejemplo, el contenedor primario es elemento del cuerpo del documento.



Guarde el documento y abrirlo en Safari o Google Chrome para acceder a la página Web. El título aparecerá 60 píxeles desde el borde izquierdo de la página.

Consejos y advertencias

En este ejemplo se utiliza un tamaño de margen exagerado de 60 píxeles para mostrar cómo el-webkit-margen-start afecta la posición de un elemento en una página Web. En la práctica, es probable que utilice valores de los píxeles más pequeños en la definición CSS. Siga usando el "margen izquierda" propiedad CSS estándar cuando se necesita para establecer el margen izquierdo de los elementos en los navegadores que no usan WebKit.

 

No hay comentarios:

Publicar un comentario