Løse Livets Problemer med CSS

0
27

Eller: Når alt du har er en CSS-hammer, verden ser ut som en CSS-spiker.

Hver gang jeg hører en perfekt fin kommentar som, “Ja, som representerer tech – feltet!” som svar på min ren-CSS-art, jeg får en skarp følelse av panikk.

Som mange folk som jobber på UIs for en lever, har jeg problemer med å anvende “tech” begrepet til meg selv uten å føle seg som en svindler. Bedrager syndrom er en vanskelig ting å riste. En front-end spesialist? Å, du mener ting som ikke er virkelig i koden? Som forsterkere opp følelsen fra bedrager å skurk.

Selv om 90% av min hverdag dreier seg om JavaScript, jeg føler det som om den “tech” – merket er et skinnende trofeet som jeg grådig snappet fra noen mer verdig. Som om det er navnløs, sultne computer science gradienter ut det, og jeg er å stjele ramen rett ut av munnen.

Ta for eksempel dette scenariet at pc-vitenskap skolert folk er sannsynligvis kjent med:

CS Kurs Problem: Skrive et skript som sorterer deretter randomiserer dette datasettet N ganger, men for hver 8. Q skrive ut 12 trær stakker, køer void flip flop, og du trenger ikke stoppe rockin’ till returnerer summen av resultatene 4x + 3y.

Mitt forslag: (12 timer og åtte liter kaffe senere) Ferdig! Her 1200 linjer med vakkert formatert koden! Det er førti-tre sløyfer, tretti-to hvis/andre forhold, og åtti-tre linjer med kommentarer fordi jeg stadig får tapt i fil — men jeg har oppnådd nøyaktig det ønskede resultatet!

CS Kurset Svar: Bruk tre linjer med recursion.

Mitt svar: …%#@& deg.

En overdrivelse, men det er nyttig å være regelmessig ydmyket sånn. Det hjelper deg å vokse som en programmerer, problemløser, og menneskelig. Pluss at det forbereder deg til den virkelige verden scenarier i din karriere der du vil jevnlig kommer over interessante utfordringer som krever en bit av kreativ tenkning.

Når det kommer til CSS siden av ting, ingen arbeidsgiver vil aldri be deg om å produsere en detaljert maleriske CSS kunstverk. Hvis de gjør det, du virkelig bør umiddelbart rapportere det som trakassering til HR. Men det er veldig vanlig å ha en liten og noen ganger uvanlig forespørsel. En som kanskje ikke har en åpenbar løsning med en gang.

“Tech-fri” CSS — med sin åpenbare mangel på programmering funksjoner — kan ikke umiddelbart kommer til tankene når de får en slik utfordring. Men gjør ingen feil, det kan bli en av de mest verdifulle verktøy i din algoritme arsenal! For eksempel:

CSS Kurs Problem: En ansvarsfraskrivelse melding behov for å komme opp til syne som en advarsel når en bruker klikker på en bestemt input-feltet.

Forslag: Stykke av kaken! Vi bruker vår trofaste venn JavaScript for å utløse et klikk eller fokus event på input-elementet. Da vi legg ansvarsfraskrivelse mal. Deretter gjør vi en Ajax call for innholdet. Når våre Lover() er løst, vil vi legge til elementet til side og finne hvor du skal sette inn det ved hjelp av å finne arrangementet.målet er overordnet element. Etter ansvarsfraskrivelse er lastet inn, må vi sikre at vi har håndtert en annen klikk på hendelsen på den faktiske ansvarsfraskrivelse seg til å veksle ut av det. Når vi har slått ut av det, vi ødelegge element. Hvis input er klikket igjen, vi gjentar denne prosessen.

CSS Kurs Løsning: input:focus + .ansvarsfraskrivelse { display: block; }

Svar: …%#@& av.

Igjen, det er en overdrivelse (og verdens minst effektiv JavaScript-løsning), men det er bare en liten overdrivelse. Jeg ser disse typer forslag blir satt til å bruke langt mer ofte enn du forventer. Å være i stand til å gi utrolig raske løsninger til det har lenge vært tenkt på som lange JavaScript problemer? Det er en av måtene som CSS tillater meg å føle deg som en mester av tech.

Dette er bare en av mange ting jeg elsker om CSS. Begrenset sett av regler er akkurat det som gjør det så gøy. Du trenger ikke forvente CSS for å oppfylle alle dine behov, som er det som gjør det hele mer givende når du ender opp med å finne en måte som det kan.

Nå si at det er et design challenge. Du blir bedt om å implementere denne formen i nettleseren:

Forslag 1: “Det er ingen “reverse-border-radius” egenskapen til å lage figuren i CSS, så det er ikke mulig. Bare legge inn et bilde. Duh.”

Svar 1: Greit greit, ikke lære CSS for alt jeg bryr meg.

Ingen kom tilbake! Jeg vil at du skal lære.

Det er sant at ingen vil straffe deg for å bruke et bilde. Det er ingen CSS politiet å håndheve denne regelen. Helvete, det er ikke engang noen computer science politiet stopper deg fra å bruke en forferdelig milliarder kroner-linje-algoritmen i stedet for et vakkert enkel rekursiv en. Men hvis det er noen konseptet til å være delt mellom CSS og CS-det er som “ikke mulig”, er neppe noen gang svaret.

Så la oss prøve en brute-force-metoden, skal vi?

Forslag 2: Start med et svart rektangel, deretter hakket ut sidene med to border-radiused <div> – elementer som samsvarer med den hvite bakgrunnen farge, som så:

Svar 2: Ok! Nå er vi å få et sted. Formen kommer sammen. Men hva hvis bakgrunnen er varierende? Eller en gradient? Eller et bilde? Hvordan ville det se ut?

Hm. Ikke lenger ser ganske så fint. Så hvordan gjør vi lar vår naturlige bakgrunnen for å skinne gjennom, mens de fortsatt holder et skrånende-innover form — noe som CSS ikke er opprinnelig bygget for å støtte?

Forslag 3: Holde rektangel. Holde buet divs. Men ikke fyll rektangel med farge, og ikke fyll buet divs med farge. I stedet spre svart farge på utsiden av den buede divs, ved hjelp av box-shadow. Rektangelet vil bare trenger en overflow: hidden; å holde box-shadow farge som finnes innenfor sine grenser.

Svar 3: Godt gjort! Vakkert!

Ovenfor teknikken har blitt beskrevet i enda bedre detaljer i Ana Tudor ‘ s gode innlegg på snappet opp hjørnene. Og det er et utmerket konsept for å holde i tankene når presentert med “ikke mulig med CSS” problemer. Det er en som jeg elsker å bruke når du lager kunst.

Ta, for eksempel, er denne delen av en av mine CSS malerier:

Den menneskelige halsen dessverre vanligvis ikke kommer beleilig pakket i en perfekt rektangulær form. Men HTML gjør, så det er hva vi har å jobbe med.

Men vent, er ikke det nakke-formen ganske lik den buede svarte form som vi skissert ovenfor?

Jepp, det hele startet med et stort rektangel. I dette tilfellet, vår ytre-kurvet divs bare brukes et mykere blending på deres box-shadow.

Utenfor arbeid, jeg holde kommer tilbake til CSS for kunstnerisk inspirasjon.

Fordi noe om de begrensninger bare ringe til meg. Jeg vet at jeg ikke er alene når jeg sier at en rigid sett av restriksjoner er den beste katalysator for kreativitet. Total kunstnerisk frihet kan være en lammende konseptet.

Som noen ganger kan være tilfelle med programmering. Hvis du har den mest kraftig programmeringsspråk i verden til din disposisjon, og det begynner å synes naturlig at du bør så har ingen problemer med å løse eventuelle programmering problem. Med alle disse fantastiske verktøy som tilbyr utallige løsninger for å løse det samme problemet, er det ikke rart at vi noen ganger fryse opp med informasjon overbelastning.

Sikker, CSS kan bli tenkt på som ikke å være en “ekte” komponent av tech stabelen. Jeg vil ikke argumentere mot det. La oss innse det, ren CSS er ikke om recursion eller lagring av data eller database-spørring. Dens primære hensikt er faktisk for prettification — noe som ikke akkurat hjelper stigma av front-enders ikke å være “ekte” teknologikyndige eller programmerere.

CSS aldri gjort noen dristig påstand eller løfter. Det har bare tilbudt hjelp, og det bare viser seg at dens hjelp kan være direkte heroiske.

Hvis du er en front-ender som har å gjøre med en haug av DevOps folk som gjør narr av sine CSS, bare vent og se hva slags respons de får når du snike en body { display: none; } på produksjon. Vi får se hvem som ler!*

* De vil fortsatt være de ler fordi du vil være sparken. Vennligst ikke gjør dette.