CSS-tabbladen - enkele voorbeelden van hoe u tabbladen kunt maken zonder JavaScript.

Vandaag stellen we er een paar voor interessante voorbeelden tabbladen met inhoud zonder betrokkenheid JavaScript-hulpmiddelen of anderen hulpmiddelen van derden. Gebruik het!

Wie heeft CSS-tabbladen nodig?

Vaak is de vraag “ Hoe maak je tabbladen CSS' worden gevraagd door beginners die niet kunnen/weten hoe ze scripts moeten gebruiken, of door ontwikkelaars die optimalisatie en prestaties nastreven. Het is natuurlijk gemakkelijker om een ​​paar regels code aan het style.css-bestand toe te voegen dan speciale plug-ins aan te sluiten en de site nog meer te laden. Hieronder geven we enkele voorbeelden van hoe eenvoudig het is om inhoudstabbladen te implementeren met behulp van pure CSS3.

1. Mooie tabbladen met snelle reactie op schakelaars. Er zijn hier geen onnodige animaties of andere onzin. Competent en to the point. Het resultaat wordt bereikt door:

2. De tweede optie bevat een kleine animatie bij het schakelen tussen tabbladen en ziet er ook goed uit. De implementatiemiddelen zijn hetzelfde: element invoerformulieren met het radio-attribuut. U kunt in het onderstaande frame klikken:

3. De laatste optie is interessant omdat het lijkt alsof je schakelt tussen fasen van gebruikersinteractie. Het algoritme is vergelijkbaar, er wordt alleen controle gebruikt in plaats van het radio-attribuut. Het resultaat staat hieronder:

Hoe gebruik je deze CSS-tabbladen?

Voor het volledige voorbeeld opent u het frame in een nieuw tabblad en belt u contextmenu. Selecteer daarin " Broncode frame" en sla het op uw computer op. Kopieer vervolgens de HTML- en CSS-code naar uw project. Succes!

Na het kijken cursus werk Collega's in de workshop waar tabbladen werden gebruikt bij invoer, wilde ik je vertellen over vier methoden voor het maken van tabbladen (hierna tabbladen) met behulp van schone en standaard CSS. Maar er ging iets mis en het hele artikel veranderde in een onderzoek naar een methode voor het ordenen van tabbladen met behulp van doel.

Pseudo-klasse doel

In CSS doel is een pseudo-klasse die is ontworpen om een ​​URL te binden ( adresbalk browser) en een element met de opgegeven identificatie op de pagina. Aan het einde van de URL wordt een hashtag gebruikt om het element aan te duiden. Het element waar een hashtag naar verwijst heet doelelement.

Als er een hashtag in de URL verschijnt die overeenkomt met de identificatiewaarde van een element op de pagina, wordt er naartoe gescrolld.

Met behulp van deze pseudo-klasse kunt u niet alleen naar verschillende delen van artikelen navigeren, maar ook de stijl ervan wijzigen.

Laten we bijvoorbeeld zeggen dat we de volgende opmaak hebben:

...

Invoering

Hier staat wat tekst

https://website.com/articles/target-for-you#introductie

Op dit punt laadt de browser de pagina en springt onmiddellijk naar het begin van het doelelement. Ben het ermee eens dat dit best handig is.

Echter het meest interessant gebruik Deze pseudoklasse is de mogelijkheid om stijlen op het doelelement toe te passen. U kunt bijvoorbeeld de tekstkleur van de kop, het doelelement, wijzigen:

Kop:doel ( kleur: #ffff99; )

Met behulp van selectors in CSS kunt u ook aangrenzende, onderliggende en gerelateerde elementen beheren:

Kop: doel + p ( lettergrootte: 2.4rem; )

Uiteraard wordt de klasse hier alleen als voorbeeld gegeven - niemand verbiedt directe toegang tot de selector via tag:

H1:doel ( kleur: #ffff99; )

Meer gedetailleerde informatie over pseudoklasse doel kan worden verkregen uit deze materialen:

• Pseudo-class:target - stijlen voor het ankerelement in het HTML-document

Eerste inspectie

Ik denk dat het geen geheim is hoe tabbladen werken. Maar laat me u herinneren aan de essentie: de gebruiker klikt op de titel van het tabblad en de inhoud ervan wordt op wonderbaarlijke wijze weergegeven.

Vroeger, en zelfs nu, was dit klaar met behulp van JavaScript. Helaas zul je aan het eind van het artikel begrijpen waarom JavaScript-oplossingen veel interessanter zijn vanuit het oogpunt van bruikbaarheid dan CSS-oplossingen. Er is geen ontkomen aan, maar je moet het weten.

Een typische tabbladwidget ziet er ongeveer zo uit:

Alles is duidelijk en technisch zeer eenvoudig. Maar voordat we met de implementatie beginnen, wil ik je vertellen waarom dit artikel is geschreven.

Het probleem is dat ik niet tevreden ben bestaande oplossingen. Klinkt bekend? Ja, maar hier is alles wat ingewikkelder, omdat er geen CSS-oplossingen zijn die van project naar project kunnen worden gekopieerd en geplakt.

Dus dit is wat ik nodig heb van tabbladen:

• Maximaal aanpassingsvermogen voor projecten. Dit betekent dat ik blij zal zijn door de jade en minder bestanden te kopiëren en plakken.
• Maximale ontkoppeling HTML-opmaak van CSS. Dat wil zeggen, om nieuwe tabbladen toe te voegen, hoef ik niet naar CSS te gaan en daar, op basis van de opmaak, iets toe te voegen.
• Geef het standaardtabblad op via een klasse.
• Normale opmaakstructuur.
• Gebrek aan compleet absolute positionering op tabbladen en schakelaars.
• Fiets - wat is er mooier dan je eigen fiets?
• Geen JavaScript.

Voordat u echter doorgaat met de oplossing, moet u alle methoden vermelden voor het organiseren van tabbladen in CSS:

• Pseudo-klasse gecontroleerd bij het invoerelement;
• Pseudo-klasse doel;
• Pseudo-klasse focus;
• Pseudo-klasse zweven;

Opties met zweven En focus Ik vind het niet leuk. Ik zal ze niet meer vermelden in het artikel.

Uitvoering

Laten we beginnen met het oplossen van het probleem dat het gebruik van een pseudo-klasse ons oplevert doel- scroll naar het doelelement.

In eerste instantie stond er in het artikel een verhaal over hoe ik tot de beslissing kwam, maar uiteindelijk komt dat hier niet. Het is geen interessante activiteit om iets te vertellen dat uiteindelijk logisch en vrij eenvoudig blijkt te zijn.

Om van de scroll af te komen, moet u de display-eigenschap aan het doelelement toewijzen en hieraan de waarde none toewijzen. In theorie weten we dat het element zich in wezen in de DOM bevindt en dat het scrollen ernaartoe zou moeten werken, maar aangezien we de eigenschap display hebben, is het onmogelijk om de coördinaten van het element te berekenen. Ik weet niet of dit echt waar is, maar het werkt.

Daarom verwijzen we niet naar het tabblad zelf, maar naar het extra lege blok dat zich er direct voor bevindt. Lastig? Dat dacht ik ook toen ik twee uur van mijn leven besteedde aan het zoeken naar een oplossing.

HTML-lijst

Ik heb slechts twee van de drie tabbladen opgegeven. Ik denk dat de structuur uiterst duidelijk is en geen uitleg behoeft.

De klasse -default specificeert het standaardtabblad dat moet worden weergegeven. Het blok dat voorafgaat aan het blok met het klasse-item is het besturingsblok.

CSS-lijst

Helaas is de CSS niet zo mooi als we zouden willen, maar daar zullen we later meer over praten. Alle opmerkingen over de code staan ​​in de opmerkingen :)

Tabs-widget > .content (positie: relatief; ) // Verberg het lege blok dat bedoeld is om het scrollen te annuleren > .content > .scroller (weergave: geen; ) // Geef het tabblad weer naast het doelelement op. bovenaan het eerste tabblad > .content > .scroller:target + .item (weergave: blok; positie: absoluut; links: 0; rechts: 0; bovenaan: 0; onderaan: 0; z-index: 2 ; ) // Het eerste tabblad moet altijd relatieve positioning.tabs-widget > .content > .scroller:target + .item.-default hebben ( position: relative; ) // Tabbladstijlen // Let op de aanwezigheid van een gespecificeerd maximum tabhoogte, anders // grote tabbladen zullen groter zijn dan de standaard tabgroottes, // als deze kleiner is dan deze. 20px; weergave: geen; max-height: 384px ; overflow-y: auto ) // Toon altijd het eerste tabblad-widget > .content > .item.-default (weergave: blok; z-index: 1; )

Geweldig, alles lijkt te werken:

Merk op dat ik specifiek heb aangegeven dat het tweede tabblad standaard moet worden weergegeven. Hoe zal de gebruiker begrijpen dat het nu actief is? Hierover later meer.

Er zijn verschillende opties implementatie van deze techniek. Maar ik zal meteen zeggen dat veel van hen een nauw verband hebben tussen markup en CSS.

Andere implementaties

• Tabbladen (pagina's) op één pagina in html/css met:target

Animatie

Voordat ik het artikel publiceerde, besloot ik wat te slapen en 's ochtends alles te evalueren wat al is geschreven. Er wachtte echter een val op mij, gezet door het publiek Webtackles - webontwikkeling en ontwerp. Deze jongens publiceerden JavaScript-tabbladen. Begrijp je het? Precies de dag voordat ik besloot dit artikel te plaatsen. Buitensporig!

Een opmerking over de tabbladanimatie liep door de opmerkingen. En toen besloot ik dat ik animatie aan mijn tabbladen moest toevoegen.

Het probleem is dat je geen animatie aan het eerste tabblad kunt toevoegen, omdat deze er altijd is. Dit impliceert de noodzaak om alleen met de tabbladen te werken die door de gebruiker zijn geselecteerd en tegelijkertijd te proberen het eerste tabblad donkerder te maken.

Misschien ben ik te lui om na te denken, maar ik kon niets beters bedenken dan dit:

@keyframes tabbladen ( 0% ( kleur: #ffffff; ) 100% ( kleur: #333333; ) .tabs-widget > .content > .scroller:target + .item ( animatie: tabbladen 1s; ... )

Het einde van vreugde

Op dit punt kunnen vreugdevolle kreten worden overstemd, omdat de problemen met deze methode zijn dat:

• Alle tabbladovergangen worden weerspiegeld in de geschiedenis.
• Het eerste tabblad wordt altijd weergegeven.
• Het is nogal problematisch om een ​​animatie te selecteren, omdat het eerste tabblad altijd wordt weergegeven.
• Vreselijke implementatie van het markeren van actieve tabbladen.

Maar de methode om tabbladen te organiseren met behulp van invoerelementen en de pseudo-klasse:checked kent dergelijke problemen niet. Natuurlijk, behalve laatste punt. Het organiseren van de logica voor het schakelen tussen tabbladen gaat bijvoorbeeld als volgt:

// Verberg invoer .tabs-widget > .content > input (weergave: geen; ) // Verberg alle tabbladen behalve degene die actief is.tabs-widget > .content > input:not(:checked) + .item (display : geen;

Het probleem met het markeren van het actieve tabblad is ernstig. Maar er zijn vier oplossingen:

• Nog een doelelement toevoegen, maar vóór elke link, is onzin.
• Ik wil geen platte widgetstructuur en volledige CSS-binding aan de structuur.
• Bijna platte structuur met CSS aan de structuur gekoppeld - ik wil het niet.
• Absolute positionering van tabbladen - nee, het zal verschrikkelijk zijn.

In dit geval ontvangen we een waardeloze code waar je elke dag van droomt en die je herinnert aan je waardeloosheid.

Browser-ondersteuning

We gaan naar Can I Use en zien een prachtige foto over pseudo-klassen doel En eerste kind.

We testen met BrowserStack de prestaties in IE9 en zijn blij dat alles correct wordt weergegeven.

Wanneer CSS-tabbladen gebruiken?

Genoeg interessante vraag, aangezien je hiervoor bijna het hele artikel over het maken van tabbladen in CSS hebt gelezen. Ik zal proberen het te beantwoorden.

CSS-tabbladen moeten worden gebruikt als u geen ondersteuning nodig heeft voor IE onder versie 9 en daar wel behoefte aan heeft. In alle andere gevallen is de oplossing het gebruik van JavaScript.

Het meest serieuze deel van het artikel

Samenvattend zou ik mezelf waarschijnlijk één enkele vraag willen stellen en deze zo eerlijk mogelijk willen beantwoorden: "Was het spel de kaars waard?"

En mijn antwoord daarop is nee.

Zie je, wat je ook zegt, de tabbladen zijn ingeschakeld doel zal toegeven aan tabbladen invoer. Hun probleem is dat:

• Je moet op de een of andere manier de inhoud van het eerste tabblad laten zien: een kruk.
• Problemen met animatie vanwege het eerste punt zijn een steunpilaar.
• De oplossing voor het probleem met scrollen naar het doelelement is een kruk.

Het is moeilijk om iets begrijpelijks te zeggen. Weet het niet. Ik heb veel gevonden diverse implementaties CSS-tabbladen, en geen enkele voldoet volledig aan mijn eisen. Ik ben bereid te accepteren dat mijn actieve tabbladen niet worden gemarkeerd en dat de animatie slecht wordt geïmplementeerd, maar alleen totdat onze designervriend besluit het te doen.

Als je designervriend besluit ze in de kijker te zetten, heb je twee opties:

• Je steelt hier de 4 Methods CSS3 Tabbed Content-tabbladen (welke je maar wilt) en raakt boos over de nauwe verbinding tussen de lay-outstructuur en CSS.
• Je gebruikt JS.

Laat me verduidelijken dat er in het artikel “4 Methoden CSS3-inhoud met tabbladen” een verband bestaat tussen de logica voor het schakelen tussen tabbladen en hun opmaak, wat niet aan mijn eisen voldoet. De logica van het toevoegen van nieuwe tabbladen via CSS is goed als tabbladen lange tijd niet veranderen en/of niet automatisch worden aangemaakt.

Ik denk dat JavaScript in dit geval de kortste en meest efficiënte oplossing is. En ja, met deze regel geef ik toe dat CSS-tabbladen een soort kruk zijn. Maar ze zijn geen kruk zolang je het actieve tabblad niet kunt markeren en er geen complexe overgangsanimaties zijn.

Hoe dan ook, als uw site al JavaScript gebruikt voor sommige interfaces (menu's, accordeons, enz.), dan raad ik u aan om JavaScript-tabbladen te gebruiken, omdat deze:

• Gemakkelijker te onderhouden.
• Flexibeler dan welke CSS-tabbladen dan ook.
• Ze produceren geen onnodige markup.
• Gebruik meer semantisch correcte markup.
• Vrij van de nadelen van CSS-tabbladen.

En tot slot zal ik twee vragen stellen die de bezorgde lezer na het lezen van dit artikel zullen bezighouden:

• Welke tabbladen gebruik je?
• Wat vindt u van CSS-tabbladen?

Bedankt voor het lezen tot het einde.

In deze zelfstudie maken we een interessante geanimeerde tabbladgroep die de kracht van de CSS3:target-selector demonstreert met alleen HTML5 en CSS3. We hebben geen JavaScript of afbeeldingen nodig en alles werkt in browsers Internet Explorer versies 9 en hoger, Chrome, Firefox, Safari en Opera.

Onderscheidende kenmerken

Er zijn veel pure CSS3-tabgroepen op internet te vinden. Maar veel mensen hebben de volgende problemen:

• Ze zullen de inhoud van geen enkel tabblad tonen als u een link geeft zonder identificatie, dat wil zeggen als u een link geeft naar mijnpagina.html en niet naar mijnpagina.html#tab1.
• Het actieve tabblad is niet gemarkeerd.

Hoe zit het met Internet Explorer versies 6, 7 en 8?

Kun je verwachten dat moderne CSS3-effecten werken in een browser die in 2001 is uitgebracht? Internetbrowsers Explorer-versies 7 en 8 geven alleen het eerste tabblad weer. Internet Explorer 6 toont het laatste tabblad, hoewel u dit eenvoudig kunt instellen om in plaats daarvan het eerste tabblad weer te geven.

Je hebt dus twee opties:

1. Bied geen ondersteuning verouderde versies browsers. Gebruikers Internetbrowser Explorer weet niet of ze iets niet kunnen zien, dus tenzij de inhoud van cruciaal belang is voor uw pagina, kunt u het probleem eenvoudigweg negeren.
2. Omdat vorige oplossing niet erg aantrekkelijk, dan wel het meest snelle oplossing zal selectivizr toevoegen als terugval. Of gebruik de incrementele verbeteringsmethode en vergeet de nieuwe CSS3-functies.

HTML

Hier is de basis HTML5-code. De inhoud van de tabbladen bevindt zich in de sectietag. Het tabblad zelf is het eerste onderliggende tabblad en wordt gedefinieerd als een h2-element met een interne link naar buitenste label sectie: