CSS-tip, som du sandsynligvis ikke vil se i nogen tutorial

Der er CSS-regler, som du kan finde i enhver tutorial.

Og så er der CSS-regler, som du ikke finder i tutorials, men som du straks stod overfor, da du begyndte at kode. Jeg er sikker på, at du allerede har googlet om, hvordan du lodret justere et element, og hvordan du opretter det komplekse layout. Vi vil ikke tale om dette.

Endelig er der disse CSS-regler, som du ikke har opfyldt i nogen tutorial, og du ikke kunne vide. Jeg har samlet disse tip over tid, og nu har jeg besluttet at skrive en artikel i håb om, at de kan være nyttige for andre mennesker.

Det følgende er, hvad CSS-tutorials aldrig har lært mig.

Polstringstop er i forhold til forældres bredde

Hvor mange gange har du brugt relative enheder i CSS? Jeg er en stor fan af dem, fordi de giver dig mulighed for at opbygge et responsivt websted uden at skjule for meget med medieforespørgsler. Hvis du vil indstille et elements højde som halvdelen af ​​forælderens højde, er skrivehøjde: 50% nok.

Du kan bruge relative enheder overalt. Hvis du vil tilføje en vis afstand mellem to lodrette elementer, kan du skrive margin-top: 15%, og det vil gøre margen. Afstanden vil være 15% af forældrehøjden. Jeg tror, ​​du allerede ved dette, og jeg ønsker ikke at spilde din tid. Men måske ved du ikke, at det ikke er så trivielt.

I nogle situationer er det bedre, hvis du bruger polstring i stedet for margen. Men når du indstiller polstring: 15% ... hvad pokker?

Det fungerer ikke som forventet. Dette er ikke i forhold til forældrenes højde. Hvad sker der?

Opløsning

Det er i forhold til forældrenes bredde.

Ønsker du en praktisk demonstration? Her er det:

Bare leg rundt med at ændre forældrens bredde, og se, hvordan barnets polstring påvirkes.

Det kan se underligt ud i starten, men der er faktisk en meningsfuld grund til, at det sker. Du kan opdage det ved at læse CSS-specifikationerne ...

Nej, jeg spøger - der er ingen forklaring på, hvorfor det sker. Eller i det mindste fandt jeg det ikke noget sted. Det fungerer bare sådan, så husk det.

Selvom vi muligvis ikke forstår grunden til, at ingeniørerne gjorde det, kan vi bruge denne funktion til vores fordel. Hvis vi har et element, og vi indstiller følgende:

.forældre {
  højde: auto;
  bredde: 100px;
}
.child {
  polstring: 100%;
}

Derefter vil elementets højde være lige så meget som barnets højde, da vi indstiller højde: auto. Barnets højde vil på den anden side være den samme som forælderens bredde, da vi indstiller polstring: 100%. Resultatet er et kvadrat, og elementet holder det samme forhold i enhver størrelse.

Her er et fungerende eksempel:

Hvis du skifter polstring: 100% med en hvilken som helst anden procentdel, får du et rektangel. Hvis du ændrer bredden, holdes forholdet altid.

Transform kan stakke regler

Hvis du studerede datalogi, husker du med sikkerhed, at den forfærdelige skildpadde og dens udtrækkelige pen. Dette uddannelsesmæssige koncept er mere formelt kendt som skildpadde-grafik, og dets mål er at guide skildpadden på en sti gennem enkle instruktioner, trin for trin, såsom "20 trin foran" og "rotere 90 grader".

Hvad hvis du ved hjælp af CSS kunne sige en blok for at flytte “20 pixels højre” i forhold til dens nuværende position og ikke dens startposition? Og hvad hvis jeg siger, at du kan gøre det ved hjælp af transform-egenskaben?

Mange udviklere ved ikke, at transformation kan bunke mere end en regel, og n + 1th-reglen vil være i forhold til den position, der er nået ved den niende regel, snarere end dens startposition.

Er du forvirret?

Måske kan denne pen rydde dit sind:

Bemærk, at vi ikke brugte nogen JavaScript-variabler til at gemme den aktuelle position eller den aktuelle rotation. Disse oplysninger opbevares ikke noget sted! Løsningen er enkel, hvis du skriver:

transform: translateX (20px);

Og så tilføjer du en yderligere regel:

transform: translateX (20px) translateX (40px)

Den anden regel overskriver ikke den første, men de vil blive anvendt en ad gangen i rækkefølge. Det faktum, at de anvendes i rækkefølge, er vigtigt. Når du roterer et element, roterer du også referencesystemet, og yderligere regler vil være i forhold til det nye referencesystem. Så:

transform: rotateZ (20deg) translateX (30px)

vil være anderledes end:

transform: translateX (30px) rotateZ (20deg)

Du kan også kombinere forskellige enheder. For eksempel kan du centrere en 600 pixel stor div på denne måde:

transform: translateX (50vw) translateX (-300px)

Men hvis du ikke vil animere det, er calc () måske et bedre alternativ.

Hvis du undrer dig over skildpadden, oprettede jeg dette andet uddrag, som genopretter dynamikken:

Uheldigvis tegner det endnu ikke. Men hvis du vil, kan du altid implementere penfunktionen.

Margener og polstring går fra middag til midnat

Dette er let, og mange af jer synes, det er trivielt, men jeg så så mange mennesker kæmpe med firedoblinger, at jeg stoppede med at tage det for givet.

Mange udviklere ved ikke, at næsten hver CSS-ejendom har et kort alternativ. Andre udviklere ved det, men de bruger stadig specifikke egenskaber, fordi de aldrig husker ordren.

Lad mig give dig et tip:

Marginaler og grænser går fra middag til midnat.

Jeg kan forklare det bedre. Du kan med sikkerhed bruge:

polstring: 3px;
polstring til venstre: 6px;
polstring-højre: 6px;
polstring-bund: 3px;

Men du kan også bruge shortand-alternativet:

polstring: 3px 6px 3px 6px;

Reglen for at huske ordren er let - se bare dette ur:

Start fra 12:00 og fortsæt med uret. Du får den rigtige rækkefølge.

Hvis du i stedet kun bruger to værdier:

polstring: 2px 4px;

Browsermotoren udvider den og gentager parret:

polstring: 2px 4px 2px 4px;

Og til sidst, hvis du bruger tre værdier:

polstring: 2px 4px 6px;

Browsermotoren bruger både mellemværdien for venstre og højre, ligesom hvis du skrev:

polstring: 2px 4px 6px 4px;

Baggrund understøtter flere billeder

Dette er en af ​​de mindst kendte egenskaber, selvom det er bredt understøttet.

Du ved, at du kan angive en billed-URL i baggrundsejendommen, men hvis du nogensinde har brug for den, kan du faktisk indsætte så mange billeder, som du vil. Hvad du skal gøre er at adskille dem med et komma:

baggrund: url ('first-image.jpeg') øverst til venstre,
            url ('second-image.jpeg') nederst til højre;

Hvorfor kan dette være nyttigt? Hvad synes du om Linus Torvalds foran en CSS-genereret solopgang?

Du kan også firkante et rektangulært billede og tilføje de skraverede rammer, der er meget berømte på Instagram. For at opnå dette havde jeg brug for at gentage det samme billede to gange og zoome baggrundsbilledet 5x:

Registrer berøringsskærmsenheder

Takket være medieforespørgsler kan vi gøre vores websteder lydhøre og lade layoutet tilpasse sig til mange skærmstørrelser. Men dette er ikke nok!

Smartphones, tablets og klassiske personlige computere er forskellige. Uanset skærmstørrelse.

På en berøringsskærmsenhed fastgør du, stryger og klemmer, og værktøjer som HammerJS hjælper dig. Med en mus klikker du kun, men med højere præcision. Hvis du gjorde dit websted tilpaseligt til forskellige skærmstørrelser, kan du måske overveje at gøre det lydhør i andre retninger og støtte forskellige inputtyper!

Du behøver ikke kompliceret JavaScript-kode for at registrere brugeragenten. Alt hvad du behøver er CSS:

@media (hvilken som helst pointer: fint) {
  / *
    Disse regler vil blive anvendt på enheder, der ikke er berøringsskærm
  * /
}
@media (hvilken som helst pointer: grov) {
  / *
    Disse regler anvendes kun på berøringsskærmsenheder
  * /
}

Her er et eksempel:

Pro tip: Du behøver ikke en smartphone for at teste reglen, du kan simulere en berøringsskærmsenhed på Google Chrome dev værktøjer bare ved at klikke på dette ikon:

Jeg har fundet det meget nyttigt, og jeg ved ikke, hvorfor det ikke har spredt sig, selvom det er anstændigt understøttet. For eksempel brugte jeg det i en karrusel til at skjule chevronikoner i berøringsskærmsenheder for at give en mere oprindelig oplevelse.

Og til sidst kan du også angive en fil touchscreen.css og importere den betinget:

@import url ('touchscreen.css') skærm og (hvilken som helst-pointer: grov);

Bemærk: dette understøttes i øjeblikket ikke af Firefox, som du kan se på caniuse.com

Marginer kan lide at kollapse

Og hold øje med trapperne. De kan lide at ændre sig.
Percy Weasley - Harry Potter

Jeg kan godt lide CSS: det er et klart, regelmæssigt og elegant sprog - alt hvad en udvikler nogensinde kunne bede om.

Du anvender en regel, og den fungerer. Men da jeg troede, jeg vidste CSS, skete dette:

Hvad pokker sker der her? Du forventer sandsynligvis, at teksten vil have en margen inde i overskriften, men den prøver i stedet at trække overskriften ned. Dette var ikke, hvad jeg ønskede.

Senere opdagede jeg, at margenerne kunne lide at kollapse.

Hvad betyder det? Lad os antage, at vi ønsker at oprette følgende indlejrede layout:

Så vi oprettede markeringen for tre elementer, og vi satte en anden højde og en anden margin-top for hver af dem. Det burde fungere, ikke? Forkert.

Hvis du gør det, vil din browser bemærke tre tilstødende marginalblokke, og den vil være sammen med dem i en, unik, stor marginblok.

Derfor ser resultatet sådan ud:

Hvorfor sker dette? Jeg ved ikke. Dette er et historisk træk ved CSS. Jeg formoder, at når CSS oprindeligt blev standardiseret, var marginalerne ikke et stort problem, og layoutene var ikke så komplicerede, som de er i dag. Så ingeniører kunne have troet, at det var en nyttig funktion. Nu giver det overhovedet ingen mening.

Hvis du har udviklet dig i CSS i årevis, og du aldrig har mødt dette problem, er grunden til, at marginene kun kollapser, når:

  • margener er lodrette (det sker ikke for horisontale marginer)
  • ydre elementer indeholder ikke tekst eller andet indhold
  • ingen polstring eller rammer er indstillet
  • displayet er "blok"
  • overløb er anderledes end "indledende"
  • marginalerne er ikke negative

Og listen fortsætter. Hvis du støder på dette problem, kan du bare ophæve en af ​​disse betingelser (undtagen den første), og marginalerne bliver temmet. Du kan også undgå at bruge margin-top og bruge top og polstring i stedet.

Bemærk, at hans kan ske også for søskendele. Hvis du har to søskendeelementer, den ene på toppen af ​​den anden, og du indstiller margin-bund: 30px til den første og margin-top: 60px til den anden, vil den mindste kollaps. Resultatmargenen vil ikke være 30 + 60 = 90 px, men den vil være maks (30, 60) = 60 px.

Endelige tanker

Det er alt! Jeg håber, jeg ikke spildt din tid med denne artikel, og at du lærte noget af værdi.

Hvis du kunne lide indlægget, kan du klikke på knappen "bifald", der vises til venstre. Du kan give mig op til 50 klapper: D

Hvis du har spørgsmål, problemer, eller hvis du bare vil fortælle mig, hvad selvstudiet ikke lærte dig, skal du bare skrive en kommentar i nedenstående afsnit, så vil din bekymring blive værdsat!

- Christian Vincenzo Traina