Klikkhendelse i ren CSS uten:target. Mål i CSS. Hvordan det fungerer? Hva med semantikk og tilgjengelighet

Er det en måte å håndtere klikkhendelser i CSS uten bruker JavaScript. Du kan bruke metoden med :mål. Men hva om den ikke kan brukes? Det finnes en annen metode.

Se demoen. Den er fullstendig laget i CSS, ikke en linje med JavaScript-kode. Den er basert på den opprinnelige bruken av:active and:hover-velgerne.

Beskrivelse

Først må du lage en beholder som vil inneholde en knapp og blokker som vises når du trykker på musen. Markup-strukturen vil være omtrent slik:

  • Lorem ipsum dolor sit amet.
  • Consectetur adipiscing elit.
    • Knapp

    Vi må gjøre .content usynlig inntil museknappen trykkes på .wrapper. For å løse problemet, angi .content-egenskapen visning: ingen . Deretter, når museknappen trykkes på .wrapper, vil vi inkludere displayet: block property for .content. Hvorfor angi .wrapper:active .content-egenskapen display: block . I denne tilstanden vil .content bare være synlig når museknappen trykkes. Hvis du slipper den, vil .content forsvinne igjen. For å fikse dette, la oss sørge for at når musepekeren er over .content , får elementet egenskapen display: block. Det vil si at vi setter egenskapen display: block for .content:hover. CSS-koden vil se slik ut:

    Innhold ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )

    Alt som gjenstår er å "gre den" utseende og gjør det tydeligere:

    Wrapper (posisjon: relativ; ) .knapp (bakgrunn: gul; høyde: 20px; bredde: 150px; ) .content (posisjon: absolutt; polstring-topp: 20px; ) .content li ( bakgrunn: rød; )

    Knappeteksten i koden ovenfor vil ha gul bakgrunn, og informasjonen som vises når museknappen trykkes vil ha rød bakgrunn.

    Du kan enkelt finne mange opplæringsprogrammer på Internett ved å bruke pseudo-class:target. La oss imidlertid ikke følge andres kode, men prøve å forstå den og forstå hvordan den fungerer? Selvfølgelig kan vi ikke klare oss uten eksempler.

    Hva er:mål?

    I CSS:target er dette en pseudoklasse som lar deg velge en hel "bit" av HTML-dokumentet ditt som en handling skal utføres på. Dette kan for eksempel være et tekstavsnitt eller en overskrift.

    Pseudo-klasser skal ikke forveksles med pseudo-elementer, som bare kan velge en viss del av et element, for eksempel den første bokstaven eller den første linjen i et avsnitt.

    Pseudo-klasser:

    • a:link(farge:#111)
    • a:hover(farge:#222)
    • div:førstebarn(farge:#333)

    Pseudo-elementer:
    • p::first-letter(farge:#444)
    • p::first-line(farge:#555)

    Jeg tror det er tydelig fra syntaksen hva denne eller den pseudoklassen eller pseudoelementet gjør. Den mest populære pseudoklassen er :hover, alle webmastere kommer over den; den beskriver stilene til et element når de svever. target fungerer på samme måte og beskriver stilene til et element når en bestemt situasjon oppstår.

    Fragment-IDer

    Kort sagt, dette er en ting som pseudoklassen vår er knyttet til. Dette er en hashtag med et ord eller en setning som er plassert på slutten av adressen. Det ser slik ut:

    Denne teknikken kan brukes for overganger i en artikkel. For eksempel, i begynnelsen av artikkelen oppretter du en liten innholdsfortegnelse, når du klikker på et element som en person blir ført til delen hvor lenken fører, delen må legge til en identifikator.

    Dette fungerer for ren HTML, ingen triks kreves. Små identifikatorer.

    Håndtere et klikk med:target

    La oss nå prøve å forsikre deg om at når du klikker på ønsket del fra vår improviserte meny, endres tittelstilen, og viser hvilket avsnitt som er aktivt for øyeblikket.

    H1 ( font: 30px Arial sans-serif; ) h1:target ( font-size: 50px; text-decoration: underline; color: #37aee4; )

    Koden er veldig enkel - når den klikkes, endrer tittelen størrelse, farge og er understreket. Du kan legge til liv (Ruslan, hei) og lage en animasjon for å endre tittelfargen:

    H1 (font: 30px Arial sans-serif; -webkit-transition: farge 0,5s letthet; -moz-overgang: farge 0,5s letthet; -o-overgang: farge 0,5s letthet; -ms-overgang: farge 0,5s letthet; overgang: farge 0,5s letthet;)

    Å fremheve den aktive tittelen er en god ting, men hva om du trenger å endre utformingen av teksten som følger den? CSS gir oss denne muligheten. Det ser slik ut:

    H1:mål + p ( bakgrunn: #eaeaea; polstring: 10px; )

    I dette tilfellet betyr plusstegnet at stilen skal brukes på avsnittet etter overskriften. Dermed, når den aktive overskriften endres, endrer vi også seksjonsdesignet med teksten som «tilhører» ham.

    Nettleserstøtte

    Mål-pseudoklassen tilhører den tredje utgaven av CSS og støttes perfekt av alle nettlesere unntatt IE, eldre enn versjon 9. Derfor bør du ikke implementere den hvis publikummet ditt bruker denne nettleseren. Selv om det er en vei ut - dette er Selectvizr, et JS-bibliotek som du kan få IE til å fungere med CSS3. Vi legger bare til manuset og det er det, det fungerer.

    Det eneste er at hvis du ikke bruker JQuery eller MooTools, må du koble det til for at dette skriptet skal fungere. Den offisielle nettsiden har en tabell som viser hvilke biblioteker som støtter hva. Hvis du er interessert, les den. Dette .

    Konklusjon

    Å bruke pseudoklasser kan virke komplisert, men når du først forstår hvordan de fungerer, kan du gjøre fantastiske ting med bare CSS og ingenting annet. Pseudoklasse:mål- utmerket bekreftelse på dette. Med dens hjelp kan du radikalt endre interaksjonen til en side med en besøkende. Eksemplet ovenfor er det enkleste, men det gir fortsatt litt interaktivitet til siden. Men dette er bare et par linjer med kode.

    Ikke overdriv med skjønnhets- og nettleserstøtte, så vil alt bli bra.

    Ha en fin dag

    target="_blank brukes til å lage taggen åpnet lenken i et nytt vindu. Men hva er mål-HTML? Hvorfor skal det være tomt? Og det mest interessante er, hvorfor er det en understreking i begynnelsen? La oss se nærmere på denne koden og forstå hva den gjør.

    målattributt

    Målverdier

    De fire vanligste verdiene for målattributtet er:

    _selv

    Den eneste situasjonen der dette kan skje er hvis taggen brukes i HTML-en , som angir en spesifikk åpningsmetode for alle lenker. For eksempel hvis mellom tagger lagt til følgende kode , må du bruke target="_self" slik at lenken åpnes i samme vindu.

    _blank

    Åpner en lenke i en ny fane eller et nytt vindu. Dette bestemmes av brukerens lokale innstillinger, i de fleste nettlesere er dette en ny faneside. Du tror kanskje at ved å bruke denne verdien kan du implementere popup-annonseenheter. Men det er ikke sant. Oftest brukes JavaScript til dette i stedet for HTML.

    Denne målverdien for HTML-attributt brukes best til å åpne lenker til eksterne nettsteder eller PDF-filer i en ny fane. Takket være dette, etter å ha lukket disse fanene, returneres brukeren til nettstedet ditt. Men dette bør ikke misbrukes, siden det vil være ganske vanskelig for brukeren å navigere hvis hver lenke åpnes i en ny fane.

    _foreldre

    Verdien _parent åpner en lenke i den overordnede rammen for rammen du er i. Dette er ikke en populær verdi, siden kodene for å lage rammer Og støttes ikke i HTML5. Denne verdien kan imidlertid fortsatt brukes i tagger