Íme az év 10 legjobb gerinctelenje, bemutatva.

Ez egy CSS-stíluslap, amely a „Guardian Headline Full" betűcsaládot határozza meg weboldalon való használatra. Több font-face szabályt tartalmaz, amelyek mindegyike más-más súlyt (light, regular, medium, semibold) és stílust (normál vagy dőlt) határoz meg a betűtípushoz. Minden változathoz a szabály különböző formátumú betűfájlokat biztosít – WOFF2, WOFF és TTF –, hogy a böngészők a legkompatibilisebbet választhassák. A betűfájlok a Guardian asset szerverén találhatók, és a szabályok biztosítják, hogy a betűtípus megfelelően alkalmazásra kerüljön az oldal betöltésekor.Ez egy CSS-kódblokk, amely egy weboldal betűstílusait határozza meg. Különböző betűcsaládokat, súlyokat és stílusokat állít be a Guardian tipográfiájához. A kód font-face szabályokat tartalmaz a „Guardian Headline Full" és a „Guardian Titlepiece" betűtípusokhoz, megadva a különböző betűfájlokat (például woff2, woff és ttf formátumokban) és a hozzájuk tartozó súlyokat (például bold, italic, black, light és regular). Ezek a szabályok biztosítják, hogy a betűtípusok megfelelően töltődjenek be különböző böngészőkben és eszközökön.Itt a szöveg gördülékeny, természetes angol nyelvre átírva: Ez a „Guardian Headline Full" betűcsalád font-face szabályainak készlete. Minden szabály a betűtípus más-más stílusát és súlyát határozza meg, ugyanazokra a fájlokra mutatva, de különböző nevekkel. A fájlok a Guardian assets szerverén találhatók. A szabályok a következő stílusokat fedik le: - Regular (400-as súly) normál és dőlt stílusban - Medium (500-as súly) normál és dőlt stílusban - Semibold (600-as súly) normál és dőlt stílusban - Bold (700-as súly) normál és dőlt stílusban - Black (900-as súly) normál és dőlt stílusban Minden stílushoz a betűfájlok három formátumban vannak megadva: WOFF2, WOFF és TTF. A böngésző az első támogatott formátumot fogja használni ebben a sorrendben.ine-BlackItalic.ttf) formátum("truetype"); font-weight: 900; font-style: italic; } #article-body > div .content--interactive-grid, .content--interactive > div .content--interactive-grid, #comment-body .content--interactive-grid, [data-gu-name="body"] .content--interactive-grid, #feature-body .content--interactive-grid { grid-column-gap: 0px; grid-template-columns: 100%; grid-template-areas: "media" "title" "headline" "standfirst" "lines" "meta" "body"; } @media (min-width: 30em) { #article-body > div .content--interactive-grid figure.element--immersive figcaption, .content--interactive > div .content--interactive-grid figure.element--immersive figcaption, #comment-body .content--interactive-grid figure.element--immersive figcaption, [data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption, #feature-body .content--interactive-grid figure.element--immersive figcaption { padding: 0 20px; max-width: 620px; } } @media (min-width: 46.25em) { #article-body > div .content--interactive-grid, .content--interactive > div .content--interactive-grid, #comment-body .content--interactive-grid, [data-gu-name="body"] .content--interactive-grid, #feature-body .content--interactive-grid { grid-template-columns: 100%; grid-column-gap: 10px; grid-template-areas: "title" "headline" "standfirst" "media" "lines" "meta" "body"; } #article-body > div .content--interactive-grid #maincontent, .content--interactive > div .content--interactive-grid #maincontent, #comment-body .content--interactive-grid #maincontent, [data-gu-name="body"] .content--interactive-grid #maincontent, #feature-body .content--interactive-grid #maincontent { padding-right: 80px; } } @media (min-width: 61.25em) { #article-body > div .content--interactive-grid, .content--interactive > div .content--interactive-grid, #comment-body .content--interactive-grid, [data-gu-name="body"] .content--interactive-grid, #feature-body .content--interactive-grid { grid-template-columns: 620px 300px; grid-template-areas: "title right-column" "headline right-column" "standfirst right-column" "media right-column" "lines right-column" "meta right-column" "body right-column" ". right-column"; } #article-body > div .content--interactive-grid #maincontent, .content--interactive > div .content--interactive-grid #maincontent, #comment-body .content--interactive-grid #maincontent, [data-gu-name="body"] .content--interactive-grid #maincontent, #feature-body .content--interactive-grid #maincontent { padding-right: unset; } } @media (min-width: 71.25em) { #article-body > div .content--interactive-grid, .content--interactive > div .content--interactive-grid, #comment-body .content--interactive-grid, [data-gu-name="body"] .content--interactive-grid, #feature-body .content--interactive-grid { grid-template-columns: 140px 1px 620px 300px; grid-template-areas: "title border headline right-column" ". border standfirst right-column" ". border media right-column" ". border body right-column" ". border . right-column"; } #article-body > div .content--interactive-grid .content__standfirst, .content--interactive > div .content--interactive-grid .content__standfirst, #comment-body .content--interactive-grid .content__standfirst, [data-gu-name="body"] .content--interactive-grid .content__standfirst, #feature-body .content--interactive-grid .content__standfirst { padding-bottom: 0; } #article-body > div .content--interactive-grid figure.element--immersive figcaption, .content--interactive > div .content--interactive-grid figure.element--immersive figcaption, #comment-body .content--interactive-grid figure.element--immersive figcaption, [data-gu-name="body"] .content--interactive-grid figure.element--immersive figcaption, #feature-body .content--interactive-grid figure.element--immersive figcaption { / Itt nincs további stílus megadva / } }ent--immersive figcaption{padding:4px 0 0}#article-body>div .content--interactive-grid [data-gu-name=lines],#article-body>div .content--interactive-grid [data-gu-name=meta],.content--interactive>div .content--interactive-grid [data-gu-name=lines],.content--interactive>div .content--interactive-grid [data-gu-name=meta],#comment-body .content--interactive-grid [data-gu-name=lines],#comment-body .content--interactive-grid [data-gu-name=meta],[data-gu-name=body] .content--interactive-grid [data-gu-name=lines],[data-gu-name=body] .content--interactive-grid [data-gu-name=meta],#feature-body .content--interactive-grid [data-gu-name=lines],#feature-body .content--interactive-grid [data-gu-name=meta]{grid-area:2/1/5/2}#article-body>div .content--interactive-grid [data-gu-name=lines],.content--interactive>div .content--interactive-grid [data-gu-name=lines],#comment-body .content--interactive-grid [data-gu-name=lines],[data-gu-name=body] .content--interactive-grid [data-gu-name=lines],#feature-body .content--interactive-grid [data-gu-name=lines]{height:-moz-max-content;height:max-content;margin-top:5px}#article-body>div .content--interactive-grid [data-gu-name=meta],.content--interactive>div .content--interactive-grid [data-gu-name=meta],#comment-body .content--interactive-grid [data-gu-name=meta],[data-gu-name=body] .content--interactive-grid [data-gu-name=meta],#feature-body .content--interactive-grid [data-gu-name=meta]{margin-top:18px}}@media (min-width: 81.25em){#article-body>div .content--interactive-grid,.content--interactive>div .content--interactive-grid,#comment-body .content--interactive-grid,[data-gu-name=body] .content--interactive-grid,#feature-body .content--interactive-grid{grid-template-columns:219px 1px 620px 80px 300px}}body.ios .article__header .standfirst__inner p,body.android .article__header .standfirst__inner p{font-family:Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif;font-weight:500}body.ios .article__header .article-kicker__section,body.android .article__header .article-kicker__section{display:block}body.ios .article__header .article-kicker__section:first-letter,body.android .article__header .article-kicker__section:first-letter{text-transform:uppercase}body.ios .article__header .keyline-4,body.android .article__header .keyline-4{padding-top:12px!important}body.ios .article__header .meta__misc .byline__author,body.android .article__header .meta__misc .byline__author{font-family:Guardian Headline,Guardian Egyptian Web,Guardian Headline Full,Georgia,serif;font-weight:700}body.ios .article__header .meta__misc .byline__author a,body.android .article__header .meta__misc .byline__author a{font-weight:700}body.ios .article figure.element-image .figure__inner,body.android .article figure.element-image .figure__inner{height:auto!important}body.ios .article figure.element-atom+p,body.android .article figure.element-atom+p{margin-top:0}@media (scripting: enabled){:root article.content--interactive>div,:root .article{opacity:0;overflow:hidden}:root.interactive-loaded article.content--interactive>div,:root.interactive-loaded .article{opacity:1;transition:opacity 1s ease;overflow:unset}}[data-article-theme=News]{--active-pillar-100: #660505;--active-pillar-200: #8b0000;--active-pillar-300: #ab0613;--active-pillar-400: #c70000;--active-pillar-500: #ff5943;--active-pillar-600: #ffbac8;--furniture-card-gradient-color: rgba(139, 0, 0, .6)}[data-article-theme=Lifestyle]{--active-pillar-100: #510043;--active-pillar-200: #650054;--active-pillar-300: #7d0068;--active-pillar-400: #bb3b80;--active-pillar-500: #ffabdb;--active-pillar-600: #fec8d3;--furniture-card-gradient-color: rgba(101, 0, 84, .6)}[data-article-theme=Culture]{--active-pillar-100: #3e3323;--active-pillar-200: #574835;--active-pillar-300: #6b5840;--active-pillar-400: #866d50;--active-pillar-500: #eacca0;--active-pillar-600: #e7d4b9;--furniture-card-gradient-color: rgba(87, 72, 53, .6)}[data-article-theme=Sport]{--active-pillar-100: #003c60;--active-pillar-200: #004e7c;--active-pillar-300: #005689;--active-pillar-400: #0077b6;--activeItt a szöveg gördülékeny, természetes angol nyelvre átírva: --- - Pillar 500: #00b2ff; - Active Pillar 600: #90dcff; - Furniture card gradient color: rgba(0, 78, 124, .6) Android-eszközökhöz: - Felső eszköztár magassága: 58px - Alsó eszköztár magassága: 56px - Nézetmagasság (felső eszköztár nélkül): calc(100vh - 58px) iOS-eszközökhöz: - Felső eszköztár magassága: 44px - Alsó eszköztár magassága: 50px - Felső eszköztár magassága (alternatív): 20px - Nézetmagasság (alsó eszköztár nélkül): calc(100vh - 50px) Legalább 670px magas képernyőkön iOS-en: - Alsó eszköztár magassága: 84px - Felső eszköztár magassága: 44px Legalább 800px magas képernyőkön iOS-en: - Felső eszköztár magassága: 94px A felső bannerhirdetés-tároló alapértelmezés szerint rejtve van. Interaktív cikkeknél a fő tartalmi területnek nincs paddingja. A 61.25em-nél szélesebb képernyőkön az interaktív rács egyetlen oszlopot használ hézagok nélkül, és az elrendezési területek sorrendje: title, headline, standfirst, media, lines, meta, body és egy üres hely. A 71.25em-nél szélesebb képernyőkön a rács négy oszlopos lesz: 79px, 1px, auto és 79px, 10px-es hézagokkal. Az elrendezési területek a következőképpen vannak elrendezve: title, border, headline és right column az első sorban; majd border, standfirst és right column; majd border, media és right column; majd border, body és right column; végül border és right column. A 81.25em-nél szélesebb képernyőkön az oldalsó oszlopok 159px-re nőnek. A cím szakasz rejtve van (nulla magasság, túlcsordulás rejtve). A fő tartalmi területnek nincs felső margója. A 46.25em-nél szélesebb képernyőkön a fő tartalomnak nincs jobb paddingja. Az interaktív fő oszlop relatív helyzetű. A benne lévő elem-atomok rejtve vannak (nulla magasság, margó és padding nélkül). A média szakasz ragadós, a bal felső sarokban helyezkedik el, a teljes nézet szélességét és magasságát elfoglalva, 0-s z-indexszel. A média fölé sötét átfedés (áttetsző fekete) kerül, kezdetben láthatatlan, és akkor jelenik meg fokozatosan, amikor a szöveg kibővül. A 46.25em-nél szélesebb képernyőkön a média szakasz 740px széles, bal margó nélkül. A 61.25em-nél szélesebb képernyőkön 630px széles lesz, és jobbra igazított. A médián belüli felirat felül helyezkedik el extra paddinggal. A médián belüli ábrák és lightbox képek láthatatlanul indulnak, és fél másodperc alatt jelennek meg fokozatosan. A belső spanjeik rejtve vannak, a divjeik pedig teljes magasságúak. A jelölőnégyzet címkéje rejtve van. Szélesebb képernyőkön a linkeken belüli gombok teljesen láthatók és rétegezve vannak. A képek felülre vannak igazítva. Amikor egy ábra vagy lightbox „show-me" osztályt kap, láthatóvá válik. Azoknak a felhasználóknak, akik a csökkentett mozgást részesítik előnyben, a halványítási effektus le van tiltva. Az ábrák és lightbox képek abszolút helyzetűek a média tárolón belül.[data-gu-name=media] picture, .content__main-column--interactive [data-gu-name=media] img, .content__main-column--interactive [data-gu-name=media] gu-island[name=AppsLightboxImage] { width: 100%; height: 100%; margin: 0; } .content__main-column--interactive [data-gu-name=media] figure:first-of-type label { display: none !important; } @media (min-width: 46.25em) { .content__main-column--interactive [data-gu-name=media] figure:first-of-type a.open-lightbox { display: none; } .content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span { display: block; } } @media (min-width: 61.25em) { .content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span label { display: block; } .content__main-column--interactive [data-gu-name=media] figure:first-of-type picture + span #the-caption figcaption { padding-top: 8px; } } .content__main-column--interactive [data-gu-name=media] figure:first-of-type.card-figure.video-container.loop:after { content: "A videóhurkok nem támogatottak fő médiaként a SnapSlides-ben. Távolítsa el a hurkot, és válasszon helyette cinemagraph-ot vagy statikus képet."; position: absolute; top: 50px; left: 8px; color: #c70000; font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 20px; padding: 2px 6px; z-index: 100; max-width: 500px; } .content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph { height: 100vh; width: 100vw; } .content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph div:has(video), .content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph video { height: 100vh; width: 100%; object-fit: cover; } @media (min-width: 46.25em) { .content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph { max-width: 740px; } } @media (min-width: 61.25em) { .content__main-column--interactive [data-gu-name=media] figure:first-of-type.cinemagraph { max-width: 630px; } } .content__main-column--interactive [data-gu-name=media] .media-placeholder { width: 100%; height: 100%; background-color: #ededed; position: absolute; opacity: 0; transition: opacity 0.5s ease-in-out; } .content__main-column--interactive [data-gu-name=media] .media-placeholder.show-me { opacity: 1; } @media (min-width: 61.25em) { .content__main-column--interactive [data-gu-name=media] .media-placeholder { background-color: #fff; } } @media (prefers-reduced-motion: reduce) { .content__main-column--interactive [data-gu-name=media] .media-placeholder { transition: none; } } .content__main-column--interactive [data-gu-name=media] .card-figure figure > div { width: 100%; height: 100%; padding: 0 10px; display: flex; justify-content: center; align-items: center; } .content__main-column--interactive [data-gu-name=media] .card-figure figure > div > div { border-radius: 8px; height: auto; max-height: 95%; width: auto; overflow: hidden; } .content__main-column--interactive [data-gu-name=media] .card-figure.show-me figure { opacity: 1; } .content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div { width: auto; max-height: unset; border-radius: 8px; } @media (min-width: 61.25em) { .content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div { height: 95%; } } .content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait figure > div > div > div { height: fit-content; position: relative; } .content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph, .content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph div:has(video), .content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph video { height: 100vh; width: 100%; margin: 0; padding: 0 !important; border-radius: 0; } .content__main-column--interactive [data-gu-name=media] .card-figure.video-portrait:has(.cinemagraph) figure.cinemagraph video { object-fit: cover; } .content__main-column--interactive [data-gu-name=media] .card-figure:has(>[data-component=youtube-embed]) { display: fl}Itt a szöveg gördülékeny, természetes angol nyelvre átírva: A tartalmi oszlop flexboxot használ az elemek vízszintes és függőleges középre igazításához. Amikor egy média elem YouTube-beágyazást tartalmaz, a kártya ábra tárolójának magassága a tartalomhoz igazodik, lekerekített sarkokat kap, és elrejti a túlcsordulást. Az interaktív média blokkokban lévő iframe-ek a tárolójuk teljes magasságát elfoglalják. A kártyák burkolóeleme relatív helyzetű az oldalhoz képest, és a teljes nézetmagassággal feljebb van tolva. A 61.25em-nél (körülbelül 980px) szélesebb képernyőkön a burkolóelem 460px szélesre van korlátozva, kis bal margóval. A 71.25em-nél (körülbelül 1140px) szélesebb képernyőkön ez a bal margó eltávolításra kerül. A sötét témájú cikkeknél a szegély színe sötétszürkére van állítva. A 46.25em-nél (körülbelül 740px) szélesebb képernyőkön a cikk háttérszíne nagyon sötétszürke lesz. A média helyőrzők és kártya ábrák ezekben a cikkekben kissé világosabb sötét hátteret használnak kisebb képernyőkön, nagyobb képernyőkön pedig ugyanazt a sötétszürkét, mint a cikk. Az iOS alkalmazásban a média szakaszok a teljes nézetmagasságot elfoglalják, és a kártyák burkolóeleme ugyanennyivel van feljebb tolva. A meta szakasz elrejti a tárolóját, amikor az „Listen to Article" komponenst tartalmaz. Amikor a rendszer sötét módban van (és az oldal nincs világos módra kényszerítve), ugyanazok a sötét témájú módosítások érvényesek: a cikk szegélye sötétszürke lesz, a háttér nagyon sötétszürke nagyobb képernyőkön, és a média helyőrzők és kártya ábrák a megfelelő sötét árnyalatokat használják. A gyökérelem megosztás gomb színt határoz meg az aktív pillér alapján, és beállít egy átlátszatlansági értéket. A „furniture" stílusú cikk-kártyák space-between elrendezést használnak, és paddinggal rendelkeznek. Egy info gomb jelenik meg ezeknek a kártyáknak a jobb felső sarkában – kör alakú, áttetsző és kattintható. Szélesebb képernyőkön jobbra van pozícionálva. Egy lightbox gomb kis képernyőkön rejtve van, közepes képernyőkön megjelenik (de nem reagál a kattintásra), nagy képernyőkön pedig újra eltűnik. A sorozatcímkék ezekben a kártyákban félkövér fehér szövegként jelennek meg színes háttéren, serif betűtípussal. A címsor szakasznak alsó margója van, a fő címsor pedig félkövér, nagy serif betűtípussal. Az alcímek ugyanazt a serif betűtípust használják számjegyekkel.e-card [data-gu-name=headline] h2:has(strong) { font-size: 24px; padding-top: 0; } .article-card.furniture-card [data-gu-name=headline] h2:not(:has(strong)) { font-size: 42px; font-weight: 200; } .article-card.furniture-card [data-gu-name=standfirst] p { font-size: 17px; } .article-card.furniture-card [data-gu-name=meta] { display: grid; grid-template-areas: "byline byline share"; grid-template-columns: 1fr 1fr auto; } @media (min-width: 61.25em) { .article-card.furniture-card [data-gu-name=meta] { grid-template-columns: 1fr; grid-template-areas: "byline" "share"; } } .article-card.furniture-card [data-gu-name=meta] address { grid-area: byline; } .article-card.furniture-card [data-gu-name=meta] address a { border-bottom: none; } .article-card.furniture-card [data-gu-name=meta] address .byline a, .article-card.furniture-card [data-gu-name=meta] address .byline span { color: var(--active-pillar-400); } .article-card.furniture-card [data-gu-name=meta] address+div { --article-link-text: var(--active-pillar-400); } .article-card.furniture-card [data-gu-name=meta] address+div a:hover { color: #fff; } .article-card.furniture-card [data-gu-name=meta] address, .article-card.furniture-card [data-gu-name=meta] address+div { padding-top: 4px; border-top: 1px solid var(--article-border); } .article-card.furniture-card [data-gu-name=meta] address+div { grid-area: share; } @media (min-width: 61.25em) { .article-card.furniture-card [data-gu-name=meta] address+div { border-top: none; padding-top: 0; } } .article-card.furniture-card [data-gu-name=meta] .meta__social, .article-card.furniture-card [data-gu-name=meta] .meta__comment { padding-top: 0; border: none; } .article-card.furniture-card .slides-counter { border-radius: 18px; padding: 0 4px 2px 6px; background-color: #121212b3; width: -moz-fit-content; width: fit-content; } .article-card.furniture-card .slides-counter-wrapper { padding: 4px 4px 3px 0; color: #fff; font-family: Guardian Text Sans Web, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif; font-size: 12px; font-style: normal; font-weight: 700; line-height: 130%; border-bottom: none; margin: 0; } .article-card.furniture-card .slides-counter-wrapper svg { margin-bottom: -3px; } @media (min-width: 46.25em) { .article-card.furniture-card .slides-counter { position: absolute; } } @media (min-width: 61.25em) { .article-card.furniture-card .slides-counter { position: static; padding: 0 5px 2px 8px; } .article-card.furniture-card .slides-counter-wrapper { font-size: 15px; } .article-card.furniture-card .slides-counter-wrapper svg { margin-bottom: -1px; } } @media (min-width: 61.25em) { .article-card.furniture-card { padding: 10px 0; } } article.feature-dark .article-card--content.furniture-card--content { background: linear-gradient(0deg, #12121266 0% 100%), var(--furniture-card-gradient-color); } article.feature-dark .article-card--content.furniture-card--content [data-gu-name=headline] h1 { color: var(--active-pillar-500); } article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] { --byline: var(--active-pillar-500); } article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] a, article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] svg, article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] button { --article-link-text: var(--active-pillar-500); --share-button: var(--active-pillar-500); } article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline, article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline a, article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .byline span { color: var(--active-pillar-500); } article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social a, article.feature-dark .article-card--content.furniture-card--content [data-gu-name=meta] .meta__social button { border-color: var(--article-border) !important; } article.feature-dark [data-component=series] { background-color: var(--active-pillar-500); color: #121212; } article.explainer [data-gu-name=headline] h1:before { content: "Explainer"; display: block; font-family: Guardian Headline Full, Guardian Egyptian Web, Georgia, ser; }if;font-size:17px;font-weight:700;line-height:115%;color:#fff;background-color:var(--active-pillar-400);width:-moz-max-content;width:max-content;padding:3px 6px 4px}article.explainer.feature-dark [data-gu-name=headline] h1:before{background-color:var(--active-pillar-500);color:#121212}article:not(.feature-light):not(.feature-dark).news .article-card.furniture-card [data-gu-name=headline] h1{font-weight:500}[data-rendering-target=apps] article.feature-dark .article-card p{color:#dcdcdc!important}[data-rendering-target=apps] .article-card.furniture-card [data