Jag har sett många tutorials nyligen som utnyttjar :mål i CSS för att utföra en fancy feat så jag trodde att jag skulle ta dig tid att verkligen gräva in och diskutera hur och varför den här syntaxen fungerar. I stället för att blint följa någon annans kod bör du kunna använda verktyget med kunskap om vad som händer hur det påverkar webbläsarstöd.
Läs vidare för att lära dig allt om den grundläggande funktionaliteten som är associerad med :mål pseudoklass och hur du kan sträcka den förmågan att utföra alla slags galna saker med ren CSS. Längs vägen kommer vi att bygga några fantastiska navigations- och bildspel exempel som du kan lära av.
Vad är: mål?
I CSS, :mål är en pseudoklassväljare. Kom ihåg från vår artikel om: före och: efter att pseudoklasserna är ett sätt att välja en hel del av ditt HTML-dokument, medan pseudoelement kan användas för att välja en? -Del? av ett element. För att illustrera denna punkt, här är några exempel på var och en:
Pseudoklassen som du förmodligen är mest bekant med är :sväva, som gör att du kan deklarera speciell stil som aktiveras när användaren musar över ett element. De :mål pseudoklassen möjliggör också anpassad styling som aktiveras baserat på ett specifikt scenario.
Fragmentidentifierare
Den speciella händelsen för :mål pseudoklassen beror på något som kallas en? fragment identifierare.? Det finns en komplicerad historia och förklaring bakom dessa, men allt du verkligen behöver veta är att när vi diskuterar fragmentidentifierare, hänvisar vi till en hashtag som samarbetat med ett ord eller en fras i slutet av en URI.
Dessa används för att? Mål? en specifik punkt på en HTML-sida och samarbetar med ett ID (som också använder hashtag-syntaxen). När den är kopplad kan URI användas för att hoppa till dess medföljande ID. Här är en snabb demosida som jag visade upp som illustrerar denna funktionalitet.
Den här sidan innehåller en serie h1-taggar, som alla har ett unikt ID. Här är den grundläggande strukturen:
Denna struktur är samordnad med en enkel navigationsmeny bestående av listobjekt som innehåller ankare. Varje ankaremärke pekar på ett av de fragmentidentifierare som vi satt upp. Funktionen här är extremt praktisk: när du klickar på ett av listobjekten hoppar sidan automatiskt till motsvarande rubrik. Ge det ett skott för att se det i aktion. Tänk på det här fungerar med ren HTML, ingen CSS behövs.
Hantering: Mål för att skapa Click Events
Nu när vi har en enkel demo upp och igång som använder unika ID och fragment identifierare, är det dags att dra ut vår :mål pseudoklass. Något inom en :mål stilblocket aktiveras endast när en fragmentidentifierare för närvarande är aktiv i URI. På ett sätt, :mål kan användas för att skapa den någonsin svåra CSS-klickhändelsen.
Låt oss säga att vi ville göra det så att det objekt som klickas på i vår navigationsmeny på något sätt har ändrats. Detta gör det möjligt för användarna att tydligt identifiera den sektion som de hoppar till. För att uppnå detta använder vi väljaren? H1: mål? och lägg till lite variation genom fontstorlek, färg och textdekoration. Kolla in demoen här.
Animera det
Du är fri att använda :mål ganska mycket men du skulle använda :sväva, vilket innebär att du kan ha alla slags kul att lägga animeringseffekter. Här lade vi till en fin liten övergång för färgbytet. Se den här live.
Manipulera icke-riktade objekt
Låt oss säga att vi också ville ändra den medföljande punkten när en viss rubrik riktar sig. Det kan låta svårt eftersom vi redan har skapat vår HTML-struktur så att de unika ID-en bara används på h1-taggarna, men kom ihåg att CSS ger oss ett antal kraftfulla väljare. Vi kan faktiskt använda ett klick på det riktade elementet för att manipulera andra objekt på sidan.
I vårt exempel är det så enkelt att rikta in styckeelementet efter den klickade h1 som att dra ut den närliggande syskonkombinationen. Koden är nedan och demo är här.
Skapa en enkel CSS-bildspel
Med tanke på detta som utgångspunkt har utvecklare kommit upp ett med massor av bra applikationer för att utnyttja :mål pseudoklass. Du kan använda den för att skapa ett rent CSS-flikgränssnitt eller till och med ett bildspel. Låt oss se hur du skapar den senare.
För att starta måste vi koda upp en oorderad lista. Varje listobjekt innehåller en ankaremärke som pekar på en fragmentidentifierare följt av en bild med ett matchande ID.
Nu ska vi använda lite smart positionering för att driva allt på plats och naturligtvis lite :mål magi för att få allt att fungera. Se om du kan ta reda på vad som händer här innan jag går igenom dig.
Först vi flyttade våra listobjekt till vänster, utformade texten och applicerade en svängareffekt. Den intressanta delen om positioneringen är att vi har scooted alla våra bilder bort från textdelen av deras listobjekt med hjälp av den underbara tekniken för absolut positionering inuti en relativt positionerad förälder. Läs den här artikeln för att lära dig allt om hur det fungerar.
Därefter ställer vi in z-indexet för alla bilder till -1 och ställer sedan in z-indexet för den riktade bilden till 1. Detta förorsakar det listobjekt som du klickar på för att få sin bild över de andra. För att göra kontakten snygg och gradvis reducerar vi opaciteten hos de andra bilderna till noll och lägger till en CSS3-övergång. Se den rena CSS-bildspelet demo här.
Browser Support
De :mål pseudoklassväljare är en CSS-nivå tre väljare, som alla har fantastiskt stöd på ganska mycket varje webbläsare runt? utom för kursen för IE. Bra gamla Internet Explorer stöder CSS3-selektorer i version 9 och 10, men inget äldre än det.
Av den anledningen är det i stor utsträckning oklokt att använda :mål på allt som direkt påverkar användarens interaktion. Det kan till exempel vara bra för de valfria differentieringsstilarna från våra första exempel men vårt bildspel fungerar inte alls för IE8 och äldre användare.
Selectivizr till räddningen
Som med alla IE CSS3-väljare problem, det finns faktiskt en ganska enkel fix som låter dig använda :mål utan att utesluta de sorgliga människor som driver antika versioner av en webbläsare byggd av Microsoft: Selectivizr.
Bara släpp i ditt favorit JavaScript-bibliotek som jQuery eller MooTools, och klistra in i ett kodstycke från Selectivizr och resten tas hand om på ett helt automatiserat sätt. Selectivizr kommer att arbeta med sin voodoo för att få imponerande CSS3 selektorsupport till IE6 och uppåt.
Slutsats
Att använda pseudoklasser kan vara knepigt, men när du en gång känner för hur några av dem arbetar, kommer de typer saker du kan dra av med ren CSS förvåning dig. Målet? pseudoklass är ett bra exempel på något som kan dramatiskt förändra hur du strukturerar användarinteraktioner. Var noga med att du inte går av och använder den för mycket utan att överväga de konsekvenser som det kommer att ha på webbläsarsupport.
Lämna en kommentar nedan och låt oss veta vad du tycker om :mål. Har du någonsin använt det i ett verkligt projekt? Varför eller varför inte?