Fler och mer nyligen har jag sett utvecklare som använder tricks för att skapa växlande stater med ren CSS. Detta låter dig hoppa över JavaScript utan att offra interaktionen. Hur fungerar detta? Är det en godtagbar praxis?
Idag ska vi undersöka två olika metoder för att använda en kryssruta för att skapa en klickhändelse som byter mellan två bilder med bra gamla HTML och CSS. Vi avslutar med en kort diskussion om semantik och för / nackdelar med denna teknik.
Gilla Skinning a Cat
? Du skapar väsentligen en kryssruta i HTML bara för att dölja den och stjäla sin funktionalitet.?Med något CSS-trick finns det alltid en handfull olika sätt att uppnå den uppgift du syftar till att uppnå. Vad vi ska göra här idag lär oss om hur man använder kryssrutor för att skapa två stater som kan växlas mellan att bara använda HTML och CSS. Med tanke på det målet kan vi lätt komma fram till minst två sätt att uppnå det. Även inom de två huvudstrategierna finner du att det finns flera vägar som vi kan ta.
Båda metoderna innefattar vissa tvivelaktiga CSS-trickery. Du skapar i huvudsak en kryssruta i HTML bara för att dölja den och stjäla dess funktionalitet. Den första metoden sträcker helt enkelt kryssrutan till hela storleken på det område som du vill göra klickbart och använder ingen etikett.
Den andra metoden använder sig av den intressanta funktionaliteten hos etiketter som är associerade med en kryssruta. Även om du gömmer kryssrutan själv kan etiketten faktiskt stylas, placeras och klickas på för att aktivera växeln, vilket ger oss ett helt flexibelt element för att arbeta med det har två möjliga tillstånd.
Låt oss dyka in och titta närmare på var och en av dessa metoder.
Metod 1
Det första sättet att vi ska attackera detta experiment är genom att göra vår kryssruta äta upp hela objektets storlek och sedan gömma den. För att göra detta arbete behöver allt du behöver tekniskt en div som innehåller en kryssruta med en tillämpad klass. Om du vill gå vidare kan du lägga till andra attribut som? Namn ?. Vi slänger också in en bild så vi får något att byta.
Nu är det dags att utföra den tvivelaktiga handlingen att göra hela bilden till en stor kryssruta. För att göra detta, rikta du på? Växla? klass som vi satt upp före och ställer samma höjd och bredd som vi har använt hela tiden.
Ställ sedan in läget till absolut och återställ vänster, topp, marginal och vaddering, för att vara säker startpunkten kommer vara där vi vill ha den. Detta kommer att fungera i takt med vår tidigare relativa positionering så att våra kryssrutor nu kan uppta hela bildrummet. För att säkerställa att kryssrutan stannar på toppen av allt, sätt sitt z-indexvärde till något godtyckligt högt.
Slutligen sätter du opaktheten i rutan till 0 för att dölja den helt. Det intressanta här är att dölja kryssrutan stänger inte av dess funktionalitet. Så nu när du klickar var som helst på bilden kommer du att växla av och på kryssrutan.
Vår dolda kryssruta fungerar, men vi har inte satt upp det för att göra någonting än. Som jag nämnde tidigare vill vi byta upp HTML-bildens opacitet, så vi kan ställa in en väljare som utpekar några ingångar med? klass som är markerad, använd sedan syskonväljaren för att rikta bilden och ställa in opacitet till noll. För att göra effekten lite trevligare, kasta i en enkel övergång.
Testa
Med det är metod ett helt klart. Nedan bör du kunna se en länk till CodePen-sidan. Kolla in det och kom tillbaka hit för resten!
demo: Klicka här för att se den på CodePen.
Metod 2
Med den första metoden ur vägen är det dags att utforska metod # 2, vilket innebär att man använder en kryssruta etikett. Detta läggs till direkt före ingången. Lägg märke till att? För? värdet matchar ID-numret för kryssrutan. Vi slänger också båda bilderna i vår HTML, det går bara för att byta upp saker.
CSS
Återigen börjar vi med att lägga till några grundläggande stilar till div. Det finns inget särskilt speciellt här, bara några dimensioner och positionering.
Nu för något nytt.Kom ihåg att den här metoden innebär att du använder rutan för kryssrutan istället för själva kryssrutan. För att göra detta, ställ in skärmen för att blockera och ge några dimensioner. Vi inkluderade texten? Klicka på mig? i HTML ovan så måste vi stile det också. I grund och botten förändrar vi bara etiketten för att ge det en knapps utseende.
På svävar ändrade jag upp färgerna och lade pekare markören för att vidareutveckla tanken att det är ett klickbart element.
Nu är det dags att gömma kryssrutan igen, men vi ska gå om det lite annorlunda så går det bara för att visa dig att vi kan. Genom att tilldela absolut positionering och några gala positioneringsvärden skjuter vi själva kryssrutan ur synvinkel. Kom ihåg att det här fungerar eftersom vi fortfarande kan klicka på etikettelementet för att dra av växeln.
För att slutföra den här versionen behöver vi tre fler stilblock. Den första positionerar den andra bilden direkt under den första bilden. Härifrån använder vi samma kod som vi gjorde senast för att ändra opacitet på växla och lägga till en fin övergång.
Testa
Vi har avslutat den andra metoden nu, prova den nedan genom att klicka på länken.
demo: Klicka här för att se den på CodePen.
Är inte det här JavaScript-jobbet?
Utan tvekan är det här roliga saker. Med bara en liten bit av CSS och HTML kunde vi skapa en trevlig liten klickhändelse. Fördelarna här är tydliga: kort kod, ingen JavaScript, enkel implementering etc.
Tyvärr var båda de metoder som vi gick över ovanför ganska tabu i vissa cirklar. Detta beror på att de båda verkligen är en bastardisering av kryssrutan elementet. Vi använder inte verkligen elementet? Semantiskt? vilket betyder att det verkligen var tänkt att användas, istället stavar vi bara dess funktionalitet och omsluter det runt andra objekt.
Så dåligt är det här brottet? Det beror på vem du pratar med. En gammal skola kodare kommer att berätta att det här är dåliga nyheter. Använd JavaScript dummy, det är vad det är för! Trots detta brukar många av de mer imponerande CSS-handledning som publicerats på nätet nyligen använda tricks som liknar detta (en variant använder radioknappar i stället), men de gör det utan att förklara det djupt. Några av dessa är så fantastiska, du kan helt enkelt inte motstå kasta semantik mot vinden och blåsa förbi vad du tidigare men möjligt med endast CSS.
Med den här artikeln försökte jag förklara hur denna teknik fungerar på en grundläggande nivå och påpeka att det i alla fall anses kontroversiellt.
Ska jag använda det här oftare?
Jag skriver CSS-handledning för att leva. Varje dag försöker jag tänka på stora saker som jag kan lära dig. Metoder som dessa presenterar ett intressant dilemma. De öppnar så stora möjligheter att göra fantastiska rena CSS-demos. Men vissa kanske anser att det är slöseri med tiden med tanke på den tveksamma semantiska ansökan.
Här kastar jag det tillbaka till dig, Design Shack-läsarna. Vad tror du? Ska jag visa dig coola saker, även om det gör några semantiska offer? Vill du se några fler coola demos byggda med de två metoderna som beskrivs i den här artikeln? Hur kan du förbättra det här tricket? Jag skulle gärna höra dina tankar!