Google AMP - style i niestandardowe CSS
Amp renderuje strony na ekranie po bardzo dokładnym rozważeniu. Wczytane strony będą zawierały obrazy, filmy, elementy iframe itp., Które są bardziej wymagające. Tak więc żądanie http do wykonania jest opóźnione, tak że zawartość strony jest wyświetlana, a także jest wymagane miejsce na załadowanie obrazów, filmów i ramek iframe.
Amp ma funkcje, takie jak symbole zastępcze, rezerwy, srcset i atrybut układu, które sprawiają, że strony są responsywne, a także dba o to, aby zawartość strony nie została zakłócona. W tym rozdziale omówimy to szczegółowo.
Znacznik stylu Amp
Amp ma tag stylu z amp-custom na nim, jak pokazano poniżej -
<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>Zasadniczo jest używany do pisania niestandardowego css wymaganego dla strony. Nie zapomnij dodać plikuamp-customatrybut; w przeciwnym razie zakończy się niepowodzeniem podczas weryfikacji wzmacniacza, jak pokazano poniżej -
Amp obsługuje również wbudowany CSS dla elementów HTML, jak pokazano poniżej -
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>Znacznik zewnętrznego arkusza stylów
Amp nie obsługuje zewnętrznego arkusza stylów i nie będzie sprawdzać poprawności po zweryfikowaniu dla wzmacniacza.
Przykład
<!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>Podczas weryfikacji za pomocą walidatora AMP otrzymujemy następujący błąd.
Aby responsywnie wyświetlać elementy na stronie, elementy amp muszą określać szerokość i wysokość, jaką element zajmie na stronie. Dodanie layoutu = „responsive” sprawi, że element będzie responsywny na stronie, zachowując współczynnik proporcji.
Szczegóły atrybutu układu zostały szczegółowo omówione w rozdziale Google AMP – Layout.