CSS-szabályok, HTML-szűrés és a bolt CSS-változói
Hogyan kerül a téma stíluslapja a boltba, mit tilt a CSS-szűrő (import, külső url, szkriptes trükkök), mit dob el a HTML-szűrő, és milyen --shop-* változókból dolgozhatsz.
Frissítve: 2026. október 6.
A téma minden stílusa az assets/theme.css fájlban van; a bolt ezt egy style elemként teszi az oldal fejébe (a relatív url() hivatkozásokat a médiatár nyilvános címére cserélve). JavaScriptet a téma nem tartalmazhat, és a sablonokban lévő style és script elemeket a megjelenítés eldobja – ezért tényleg csak ez az egy stíluslap számít.
Mit tilt a CSS-szűrő
A feltöltés minden .css fájlt átnézi, előtte feloldja a kommenteket és a backslash-escape-eket (a „\75 rl(” trükk is url()-nek számít). Hiba:
- @import – minden stílus a téma saját fájljaiban legyen.
- Külső vagy tiltott url(): http:, https:, //, javascript:, és data: is – kivéve a base64 kódolt PNG, JPEG, WebP és GIF kép (data:image/png;base64,…).
- Szkriptet futtató konstrukció: expression(), behavior:, -moz-binding, javascript:. A scroll-behavior és az overscroll-behavior természetesen engedett.
A relatív url(hatter.webp) vagy url(assets/hatter.webp) a csomag assets/ mappájára mutat; a boltban a fájl nyilvános címére fordul. Nem létező fájl hivatkozása none-ra cserélődik. A data: és a # kezdetű hivatkozás változatlan marad.
Mit dob el a HTML-szűrő
A sablonok kimenete a boltban szűrőn megy át:
- Eldobott elemek: script, iframe, object, embed, base, meta, link, style.
- Eldobott attribútumok: minden on… eseménykezelő; href, src, action, formaction, xlink:href és poster, ha javascript:, data: vagy vbscript: címet tartalmaz; a style attribútum, ha url(), expression() vagy @import van benne.
- A fetchpriority attribútum használható (pl. a termékoldal első képén).
- A bolton belüli, /-rel kezdődő linkek a keretrendszer saját link-komponensét kapják (gyorsabb oldalváltás), kivéve ha target attribútumuk van.
SVG-fájlban tilos: script, foreignObject, eseménykezelő attribútum, javascript:, és külső (http, https, //) href.
Hatókör: a body osztálya
A body elem osztálya th-<téma-azonosító>, és a data-theme attribútuma is ezt tartalmazza. Beépített témánál ez a téma neve (pl. th-starter), feltöltött témánál viszont a feltöltéskor kapott, véletlen azonosító (u és 12 hexadecimális karakter), amit előre nem ismersz, és minden új feltöltésnél más. Ezért a saját témád CSS-ét ne a .th-<id> osztályra építsd – használj saját, egyedi osztály-előtagot (az Üres alap az s- előtagot használja), és a szabályaidat ezekre írd. A letöltött Üres alap stíluslapja .th-starter alatt van: átíráskor ezt az előtagot távolítsd el vagy cseréld a saját osztályaidra.
A bolt CSS-változói
A kereskedő arculat-beállításaiból (theme.json tokens és palette, a kereskedő módosításaival) a platform CSS-változókat tesz a :root-ra. Ezekből dolgozz, így a téma követi a kereskedő színeit és betűit:
| Változó | Forrás / jelentés |
|---|---|
| --shop-bg | palette.background – az oldal háttere |
| --shop-surface | palette.surface – kártyák, dobozok háttere |
| --shop-text | palette.text – szövegszín |
| --shop-muted | palette.muted – halvány szöveg |
| --shop-border | palette.border – keretek |
| --shop-sale | palette.sale – akciós kiemelés |
| --shop-link | a primary szín, ha a háttéren eléri a 4,5:1 kontrasztot, különben a szövegszín |
| --shop-primary, --shop-on-primary | tokens.primary és a rajta olvasható (fekete/fehér) szín |
| --shop-secondary, --shop-on-secondary | tokens.secondary és a rajta olvasható szín |
| --shop-tint | halvány kiemelő felület: világosban a másodlagos szín, sötét módban annak sötét keveréke |
| --shop-ink, --shop-paper | a világos paletta szöveg- és háttérszíne, színmódtól függetlenül (a mindig sötét sávokhoz) |
| --shop-font, --shop-heading-font | a választott betűkészletek |
| --shop-radius, --shop-radius-control | lekerekítés kártyákra/dobozokra és vezérlőkre (px) |
Képek és betűk
Az assets/ képei (png, jpg, webp, gif, svg) és betűi (woff2) feltöltéskor a bolt médiatárába kerülnek, és a bolt tárhelyét használják. Sablonból a {{ 'hatter.webp' | asset_url }} szűrővel, CSS-ből relatív url()-lel hivatkozol rájuk. Saját betűt @font-face szabállyal, a csomag woff2 fájljából tölthetsz; külső betűszolgáltató nem használható. A kereskedő betűválasztása (--shop-font) a platform saját, előre csomagolt betűit adja.