4 módja a félelmetes CSS-kompatibilitások létrehozásának
A tartalmi harmonikák hasznos mintázatot alkotnak. Számos különböző dologra használhatja őket: menük, listák, képek, cikkkivonatok, szövegrészletek, sőt videók
A legtöbb harmonika ott van JavaScript, főleg a jQuery-n, de mivel a fejlett CSS3 technikák használata elterjedt, jó példákat is találhatunk csak HTML és CSS, amelyek hozzáférhetővé teszik azokat a környezetekben, ahol tiltott JavaScript van.
CSS-alapú harmonika létrehozása trükkös feladat lehet, ezért ebben a hozzászólásban megpróbáljuk megértsék a fejlesztők által használt fő fogalmakat, amikor létrehozniuk kell őket.
A csak CSS-alapú lapok létrehozásakor általában két fő megközelítés létezik, mindegyiknek két gyakori használata van. Az első megközelítés hasznos rejtett formájú elemek, míg a második használ CSS pszeudo-szelektorok.
1. A rádió gomb módszere
A Rádió Gomb módszer egy rejtett rádió bemenetet és egy megfelelő címkét ad hozzá a harmonika minden egyes füléhez. A logika egyszerű: amikor a felhasználó kiválaszt egy lapot, akkor alapvetően ellenőrzi az adott laphoz tartozó rádiógombot, ugyanúgy, amikor kitölti az űrlapot. Amikor a harmonika következő lapjára kattintanak, kiválasztják a következő rádiógombot, stb.
Ebben a módszerben, csak egy lap lehet nyitva ugyanabban az időben. A HTML logikája így néz ki:
Tartalom címe (ne használjon h1 tagot itt)
Néhány tartalom…
p>
Neked kell minden laphoz külön rádió címke pár hozzáadása a harmonikában. A HTML önmagában nem adja meg a kívánt viselkedést, hozzá kell adnia a megfelelő CSS szabályokat is, nézzük meg, hogyan lehet ezt elérni.
Rögzített magasságú függőleges lapok
Ebben a megoldásban (lásd a lenti képet) a fejlesztő elrejtette a rádiógombot a kijelző: nincs; szabály, akkor viszonylagos pozíciót adott a címke címkéjének, amely az egyes fülek címét tartja, és abszolút pozíciót a megfelelő laphoz címke: miután pszeudoelem.
Ez utóbbi a + + jelzéssel ellátott fogantyút tartja, amely megnyitja a lapokat. A zárt fülek zölden megjelölt fogantyút is használnak “-” jelek. A CSS-ben a zárt fülek az elem + elem választó segítségével kerülnek kiválasztásra.
A nyitott lap tartalmát is rögzített magassággal kell megadnia. Ehhez az elem1 ~ element2 CSS választó segítségével válassza ki a nyitott lap testét (amelyet a fenti HTML-lapon jelöl meg)..
A CSS alapvető logikája itt a következő:
bemenet [type = radio] kijelző: nincs; label position: relatív; kijelző: blokk; címke: után tartalom: "+"; pozíció: abszolút; jobb: 1em; bemenet: bejelölve + címke: után tartalom: "-"; bemenet: ellenőrzött ~ .tab-tartalom magasság: 150px;
Nézd meg a teljes CSS-t itt a Codepen-en. A CSS-t eredetileg Sass-ban írták, de ha a gombra kattint “Nézet összeállított” gomb, láthatja a lefordított CSS fájlt.
Képegyesítés a rádió gombokkal
Ez a gyönyörű kép harmonika ugyanazt a rádiógombos módszert használja, de a címkék helyett itt a fejlesztő használta a figcaption HTML címkét a harmonika viselkedését.
A CSS kissé eltérő, főleg azért, mert ebben az esetben a fülek nem függőlegesen, hanem vízszintesen helyezkednek el. A fejlesztő használta az elem + elem CSS választót (amelyet az előző esetben használtak a váltók kiválasztásához) annak biztosítása érdekében, hogy a fedett képek szélei továbbra is láthatóak legyenek.
Olvassa el a részletes útmutatót az elegáns CSS-alapú harmonika létrehozásáról.
2. A jelölőnégyzet módja
A jelölőnégyzet módja a jelölőnégyzet beviteli típusát használja a rádió gomb helyett. Amikor a felhasználó kiválaszt egy lapot, alapvetően ellenőrzi a megfelelő jelölőnégyzetet.
A különbség a rádiógombos módszerhez képest az, hogy Lehetőség van egynél több fül megnyitására is, éppen úgy, mintha egynél több jelölőnégyzetet is ellenőrizhetne.
Másrészről, a fülek nem záródnak el magukról, amikor a felhasználó egy másikra kattint. A HTML logikája ugyanaz, mint korábban, ebben az esetben a bemeneti típus jelölőnégyzetét kell használnia.
Tartalom címe (ne használjon h1 tagot itt)
Néhány tartalom…
p>
Rögzített magasságú jelölőnégyzet harmonika
Ha rögzített magasságú lapokat szeretne, akkor a CSS logikája meglehetősen megegyezik a rádiógombos esetben, csak a bemeneti típus váltott a rádióról jelölőnégyzetre. Ebben a Codepen tollban megnézheti a kódot.
Fluid Height jelölőnégyzet harmonizálása
Ha egynél több fül van nyitva, a rögzített magasságú lapok megjelenése negatívan befolyásolhatja a felhasználói élményt, mivel a harmonika magassága jelentősen nőhet. Ez javítható, ha Ön változtassa meg a rögzített magasságot a folyadékmagasságig; ez azt jelenti, hogy a nyitott fülek magassága a tartott tartalom méretének megfelelően csökken vagy csökken.
Ehhez meg kell módosítsa a laptartalom rögzített magasságát egy maximális magasságra, és használjon relatív egységeket:
bemenet: ellenőrzött ~ .tab-tartalom max-height: 50em;
Ha jobban meg akarod érteni, hogyan működik ez a módszer, nézd meg ezt a Codepen-t.
3. A: cél módszer
: A célpont a CSS3 egyik pszeudo-szelektorja. Segítségével egy HTML elemet összekapcsolhat egy horgonycímkével a következő módon:
A lap címe
A Tab tartalma
Amikor a felhasználó rákattint egy lap címére, az egész rész megnyílik a :cél pszeudo-választó, és az URL-t a következő formátumra is módosítja: www.some-url.com/#tab-1.
A nyílt lapot a CSS segítségével lehet a CSS segítségével kialakítani szakasz: cél … szabály. Van egy nagy bemutató itt a hongkiat arról, hogyan hozhat létre szép CSS-csak harmonikákat a :cél függőleges és vízszintes elrendezésben.
A. \ T :cél módszer megváltoztatja az URL-t, amikor a felhasználó rákattint a lapokra. Ez befolyásolja a böngésző előzményeit, és a böngésző vissza gombja nem veszi a felhasználót az előző oldalra, hanem a harmonika korábbi állapotára.
4. A: hover módszer
Ez utóbbi hiányosság leküzdhető, ha kihasználjuk a :lebeg CSS pseudo-választó helyett :cél, de ebben az esetben a lapok nem reagálnak a kattintásra, hanem a lebegő eseményre. A trükk itt az, hogy meg kell vagy elrejti a meg nem fedett elemeket, vagy csökkentse a szélességét vagy magasságát - a lapok elrendezésétől függően
A lebegett elemet láthatóvá kell tenni, vagy teljes szélességre / magasságra kell állítani, hogy a harmonika munkáját elvégezzék.
A következő 3 CSS-alapú harmonika mindegyikét a: hover módszerrel végeztük, a képernyőképek alatt található linkekre kattintva megtekinthetjük a kódot.
Vízszintes képegység
Döntött harmonika
Hover-aktivált harmonika alapértelmezett állapottal
