Google AMP: estilos y CSS personalizado
Amp renderiza las páginas en la pantalla después de una cuidadosa consideración. Las páginas cargadas contendrán imágenes, videos, iframes, etc., que son más solicitudes http por hacer. Por lo tanto, las solicitudes http a realizar se retrasan para que se muestre el contenido de la página y también se crea un espacio necesario para que se carguen las imágenes, videos, iframes.
Amp tiene características como marcadores de posición, fallbacks, srcset y atributo de diseño para hacer que las páginas respondan y también se asegura de que el contenido de la página no se vea afectado. En este capítulo, analicemos todos estos en detalle.
Etiqueta de estilo de amplificador
Amp tiene una etiqueta de estilo con amp-custom en él como se muestra a continuación -
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
p {
padding: 1rem;
font-size:25px;
}
largeText {
font-size:30px;
background-color:red;
}
</style>Básicamente se utiliza para escribir el CSS personalizado requerido para la página. Por favor, no olvide agregar elamp-customatributo; de lo contrario, fallará para la validación del amplificador como se muestra a continuación:
Amp también admite CSS en línea para elementos html como se muestra a continuación:
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>Etiqueta de hoja de estilo externa
Amp no admite hojas de estilo externas y fallará en la validación cuando se valide para amp.
Ejemplo
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Dynamic Css Classes</title>
<link rel = "canonical" href = "
http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<script async custom-element = "amp-bind" src = "
https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-dynamic-css-classes"
src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.9 8.0/css/materialize.min.css">
<style amp-custom>
p {
padding: 1rem;
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Dynamic Css Classes</h3>
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>
</body>
</html>Cuando se valida con el validador de AMP , obtenemos el siguiente error.
Para mostrar los elementos en la página de manera receptiva, los elementos amp deben especificar el ancho y la altura que el elemento tomará en la página. Agregar layout = "responsive" hará que el elemento responda en la página manteniendo la relación de aspecto.
Los detalles del atributo de diseño se discuten en detalle en el capítulo Google AMP – Layout.