CSS

Trucos CSS – Trucos CSS

los :first Se utiliza una pseudoclase CSS con @page regla-at para seleccionar la primera página en un documento impreso. Es muy similar a la forma :first-child selector funciona para apuntar al primer elemento secundario en un contenedor principal, pero en su lugar selecciona la primera página impresa en una secuencia de páginas cuando el documento se envía a una impresora.

 

@page :first {
  margin: 50%;
}

Entonces, ¿sabes cómo puedes imprimir cualquier página web? Es posible que esta página web no quepa exactamente en una sola hoja de papel cuando se imprima físicamente. Y cuando se está imprimiendo más de una página, podemos usar :print pseudo-clase para seleccionar y diseñar la primera página del grupo.

los :first pseudoclase se define en Especificación de nivel 3 del módulo de medios paginados CSSque actualmente se encuentra en estado de borrador de editor. Esto significa que :first todavía se encuentra en desarrollo activo y está sujeto a cambios hasta que se implemente por completo como una recomendación del solicitante.

Sintaxis

@page :first { }

Según MDN, :first solo puede establecer margin, page-break, orphansy widows propiedades de la primera página impresa. Pero después de la prueba, margin es la única propiedad que parece tener un efecto visible en el momento de escribir esto.

Demostración

En la siguiente demostración, creamos tres <section> Forzamos un salto de página después de cada uno para obtener un total de tres páginas cuando enviemos esto a la impresora.

Este es el CSS correspondiente:

@page :first {
  margin: 50%;
}

section {
  page-break-after: always;
  break-after: always;
}

Usando :firstseleccionamos la primera página de las tres y establecemos un margen extra grande en ella.Las dos últimas páginas no tendrán margen extra.

Compatibilidad con navegador

ES DECIR Borde, final Firefox Cromo Safari Ópera
8 todo No 18 6 todo
iOSSafari Ópera Móvil Navegador para Android Chrome para Android Firefox para Android
6 todo 4.4 todo No
fuente: canio

Especificación

Módulo de medios paginados CSS nivel 3

Más información

artículo

el 13 de mayo de 2015

Reglas at de CSS

Almanaque

el 1 de junio de 2021

ellos sangran

@page :top { bleed: 5cm; }

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba