Et par brukskasser til Calc ()

Et par brukskasser til Calc ()

calc () er en innfodt CSS mate a gjore enkel matte rett i CSS som en erstatning for en lengdeverdi (eller omtrent alle tallverdier). Den har fire enkle matematikkoperatorer: legg til (+), trekk (-), multipliser (*) og del (/). A v re i stand til a gjore matte i kode er hyggelig og et velkomment tillegg til et sprak som er ganske antall tungt.

Men er det nyttig? Jeg har belastet hjernen min tidligere, og provde a tenke pa apenbart nyttige saker. Det er definitivt noen skjont.

Kan ikke forprosessorer gjore var matte?

Alle CSS Preprocessors har matematiske funksjoner og de er ganske nyttige. Men de er ikke helt like kraftige som innfodt matte. Den mest nyttige evnen til calc () er dens evne til a blande enheter, som prosentandeler og piksler. Ingen Preprocessor vil noensinne kunne gjore det. Det er noe som ma skje pa gjengjeldstidspunktet.

Det ma v re mellomrom rundt matematikkoperatoren. Du kan hekke.

Nettleserstotte.

Det er overraskende bra. Kan jeg bruke. er alltid flott for a sjekke ut detaljene der. Pa skrivebordet vil bekymringene v re det IE 9+, Safari 6+, og vil ikke v re i Opera for det er pa Blink i 15+. Pa mobil, stotter Android og Opera Mini det ikke i det hele tatt, og iOS bare pa 6,0 +.

Du ma ringe der. Jeg har faktisk kunnet bruke den i produksjon i visse scenarier allerede.

Bruk sak nr. 1: (All Height – Header)

Et blokkniva barnelement med hoyde: 100% vil v re sa hoy som sitt foreldreelement i blokkniva. Det kan v re fint a lage en farget modul sa hoy som foreldreelementet i noen tilfeller.

Men la oss na si at foreldreelementet blir for lite til a inneholde alt innholdet i modulen. Du vil at innholdet skal rulle, men du vil bare at innholdet skal rulle, ikke hele modulen. Bare sett overlop-y: auto; Ikke sant? Ikke helt, fordi overflow-y bare er nyttig hvis innholdselementet selv har en sett hoyde som kan overflodes. Vi kan ikke gjore innholdselementet 100% hoyt fordi med overskriften der, blir det for hoyt. Vi trenger 100% minus hoyden pa toppteksten. Hvis vi vet at header hoyde, er det gjennomforbart!

Du kan gripe at overskriften ikke burde ha en fast storrelse. Kan v re kult en dag hvis calc () kunne trekke malte storrelser av elementer, men det er ikke mulig enna. Du kan sette toppteksten for a overfylle med ellipsis.

Bruk sak nr. 2: X piksler fra nederste hoyre hjorne.

Vi kan enkelt plassere bakgrunnsbilde X-piksler fra overste venstre hjorne.

Det ville sette hunden 50px fra venstre og 20px fra toppen av elementboksen. Men hva hvis du vil ha det 50px fra hoyre og 20px fra bunnen? Ikke mulig med bare rette lengdeverdier. Men calc () gjor det mulig!

Bruk sak nr. 3: faste takrenner uten foreldre.

La oss si at du vil ha to kolonner ved siden av hverandre. Den forste 40% brede, den andre 60%, men med et fast 1em gap mellom kolonnene. Ikke tenk det Grids har faste takrenner, men de er ikke sanne takrenner pa en mate. Kolonnene selv stoter rett inn i hverandre, og kolonnene er laget av intern polstring inne i disse kolonnene.

Ved a bruke calc () kan vi lage den forste kolonnen 40% bred med en hoyre margin pa 1em, og deretter gjore den andre kolonnen 60% bred minus den 1em.

Du kan fjerne halvparten av renden fra begge hvis du onsket a holde andelen mer noyaktig. Na har du to sanne kolonner adskilt av fast plass uten a trenge foreldreelementer eller ved hjelp av den interne polstring.

Bruk sak nr. 4: Viser matematikk er lettere a forsta.

Snakker om kolonner, blir divisjon matte slemme. La oss si at du ville ha et 7-kolonne rutenett, du kan ha klasser som:

Ikke akkurat magiske tall, men vanskelig a forsta pa et oyeblikk.

Bruk Case # 5: Kinda Crappy box-size-erstatning.

Jeg er en fan av universell boks-storrelse: border-box; fordi det betyr at du ikke trenger a gjore mye matematikk for a finne ut hvor stort et element faktisk er, justerer vi det matte nar ting som kant og polstring endres.

Hvis du vil gjenskape hva boksstorrelsen gjor, kan du bruke calc () for a trekke verdiene etter behov.

boks storrelse har langt bedre nettleser stotte enn calc () skjont, sa dette ville bli sjelden brukt.

Fremtiden?

Jeg tror det vil v re interessant nar vi kan bruke attr () -funksjonen pa andre steder enn innholdsegenskapen. Med det kunne vi gi verdien av HTML-elementer, kjore beregninger pa dem, og bruke de nye tallene til a gjore design-y ting. Liker a fargelegge innganger basert pa tallene de inneholder.

Kanskje vi kunne bruke den til a gjore fancy ting med & lt; progress & gt; elementer som forvandle det til et speedometer som pa denne siden. Kanskje noe som:

Kommentarer.

Den eneste tingen jeg synes er veldig intuitiv om calc er at 100% alltid synes a v re den samme som 100VH (eller 100VW), og likevel er dette ikke bekreftet i dokumentasjon om calc. Til meg.

er 100% av den n rmeste forelder, ikke vinduet. Jeg frykter at kalk vil fortsette a v re av begrenset verdi til vi kan si kalk (#bar (bredde) -3em); og vet at det vil fungere.

Jeg tror ikke det er dokumentert fordi det ikke er sant. Sa lenge foreldrene har en definert bredde (og elementet ditt er ikke fast), vil det alltid v re i forhold til overordnet. Eksempel: http://codepen.io/ggilmore/pen/d8fc7309e1fc387f8965e66674ac031c.

Takk .. se, det er fornuftig, og jeg synes det var forste gang det var fornuftig for meg. Selv da jeg skrev mitt opprinnelige innlegg, var jeg andre gjetter meg selv. Det er mulig at det er et tilfelle av mine egne forutsetninger, men jeg vet fortsatt ikke at jeg har kommet over en setning sa enkelt som svaret ditt. Selv om det er definert bredde & # 8221; eller & # 8220; definert relativ dimensjon & # 8221; (dvs. hoyde: kalk (100% & # 8211; 30px) i henhold til Chriss opprinnelige eksempel synes a foresla at det vil male hoyden ikke bredde.

Ja, det var det jeg mente. Bare sagt bredde pa grunn av eksemplet.

Et utmerket og informativt innlegg «Jeg har blitt l rt calc () til studenter, men har slitt med gode brukssaker og de som du skisserte over er gode ideer & takk for at du delte & # 8230;

Jeg ville bare mobilstotte var bedre, men med tiden vil det bli bedre, og # 8230;

Har ikke engang kjennskap til calc (), onske jeg hadde kjent om disse arene siden! Det har lagret sa mye tid! Takk for at du skrev om det!

Det er bra Chris. Jeg tror at bruken av kalken faktisk ikke vil gi deg aksaksestorrelsen pa sidene du trenger, det vil v re for stor. Er det en mate a gjore de tre sidene like.

Tab Atkins har angitt via Lea Verou post pa calc () og attr () at CSSWG har blitt enige om at attr () skal tillates i calc () sa na er det bare et sporsmal om tid for det & # 8217; s implementert?

Det ville v re ganske pent a kunne lage enkle strekdiagrammer basert pa attributtverdier uten a ty til js.

Noen som vet om det er noen ytelse treff pa a bruke calc ()? Et raskt google-sok ga liten info.

Dette er veldig nyttig.

Takk for at du delte.

Vel, disse tilfellene kan gjores med eldre teknikker.

Merkbart, for # 2 kan du bruke sokeord som angir fra hvilken kant forskyvningen er gitt, takket v re CSS Bakgrunn og grenser. Modul Niva 3:

Interessant Safari 6,0 stotter ikke bakgrunnsoversettelsessyntaxen du nevner, slik at du kan bruke calc for a fa enda bedre stotte. Ratt!

Ja, denne typen posisjonering ble implementert i Webkit sv rt nylig: i slutten av 2012. Skam til Webkit. Se feil 37514.

hei, i brukstilfeller # 3 ma du ogsa trekke pa polstring av det andre omradet pa grunn av boksemodellen; det ser slik ut:

Flott artikkel som vanlig Chris, et sporsmal skjont.

Nar det gjelder bakoverkompatibilitet, vil du fa tiln rmet ditt grid-erstatningseksempel som dette?

bredde: calc (100% / 7 * 2);

Jeg vet at noen kanskje sier at det er bortkastet tid (og byte), men det kan v re en fin mate a disambiguere (nesten) magiske nummeret pa. Uanstrengt kanskje?

Kan ogsa bare kommentere det:

bredde: 28,5714%; / * (100% / 7 * 2) * /

Ah, wow, jeg har absolutt nodvendig brukskode # 2 til enhver tid, hver gang denne situasjonen har kommet opp, har jeg helt ignorert kalk ..

Sa hvis jeg onsket at et bakgrunnsbilde skulle v re sentrert, men offset & # 8230; Kan du ha & # 8220; calc (sentrert & # 8211; 50px) & # 8221; for eksempel? Eller strengt enhetsverdier (50% / 50px).

Vil ha litt a spille for a gjore senere tror jeg.

En liten hjelp nodvendig. Kan en klebrig bunntekst bli opprettet ved a bruke calc?

Teoretisk sett ja, som jeg forstar det, forutsatt at fotfodselselementet er lik i hoyden til siden, ellers vil formelen din bli konvolutt.

Men kunne du ikke bruke:

posisjon: absolutt; bunn: 0px;

i forhold til footer div for a oppna det samme malet?

Min storste skuffelse, etter a ha lest denne artikkelen, er mangelen pa stotte pa Android og andre mobile nettleserv platformer for & # 8216; calc & # 8217 ;.

Jeg onsket a bruke calc for a relativt plassere en vekselspace div, som inneholdt en paloggingsskjema slik at den ville v re responsiv og vises sentrert langs y-aksen.

Alt jeg trenger a gjore er a kontrollere sin maksimal bredde i prosentiler for hvert bruddpunkt, sammen med font-, linjehoyde-, polstring- og marginparametere gjennom @media-sporringer. Jeg antar at jeg ogsa ma adressere y-aksens posisjonering pa samme mate & # 8211; i hvert fall for tiden.

Det er som javascript-funksjon, beregning av matematikk.

Bruk sak nr. 2 kan oppnas uten a bruke calc (). For a oppna det som er gjort i demonstrasjonen, kan du bare gjore:

Chris, du er Genius, loser du problemer som et smorbrod. Jeg prover a kopiere deg innenfor designomradet. og det gar bra. Takk skal du ha.

Bruk sak nr. 2 er fantastisk.

Jeg vil bruke denne funksjonen mer, men jeg er redd for ytelseskostnaden & # 8230; Noen har noen tall pa dette?

Nivaet pa stotten er hoyere enn jeg gjerne ville gjette & # 8230; Kan noen andre se et stadium hvor stotte og en minimale nettleserversjon vil bli tatt i bruk globalt til at det er en grunnlinje av stotte som devs vil stotte og arbeide opp?

Vel, det er nyttig, men ikke store tider. Det ville v re fint a blande kalk med variabler pa denne maten:

Hvor vanskelig vil det v re a skrive en polyfil for unsupported browsere? Ville det til og med v re verdt det?

Hvis min minne tjener, synes 100% i calc () a gjenspeile bredden pa den siste posisjonen: relativ foreldre.

I det minste det som jeg husker pa dette tidspunktet, sa ikke ta det som evangeliet, men bare noe man kanskje vil vurdere som en mulighet. A v re sa stort alt fra serverstartparametere til CSS og all koding i mellom kommer over platen hver dag, noen ganger er det vanskelig a holde et presist minnesmerke av alt. 🙂

Beregnet () -funksjonen var en umiddelbar hit her, selv om jeg ma bekjenne at det var noen mindre ting jeg onsket at den kunne ha inkludert, for eksempel noen betingelses syntaks.

Nar det gjelder attr () -verdien og den brede bruken utover innholdsegenskapen, kan man i slike tilfeller lope inn i egnets s regenheter. Nar det brukes her (regelmessig), er det ofte nodvendig a legge til en ekstra CSS-regel som fusjonerer valjeren av regelen som inneholder attr () med valjeren av en regel som unikt identifiserer hvert element pa siden som effekten skal brukes pa .

Arsaken er ganske enkelt at fordi hver forekomst sannsynligvis vil ha en unik resulterende verdi, trenger hver en unik spalte i CSS-reglene for a holde verdien i motsetning til den ofte sokte delte verdien av klasser.

Folk kjorer regelmessig inn i denne instansjonsoppforselen nar de prover a endre animasjonsnokkelrammer i realtid og lignende aktiviteter, men kur er alltid ganske enkelt nar man husker at hvis en verdi endres, trenger den sin egen regelspor pa en eller annen mate.

Ofte foler folk at de trenger a gjenta en regel for a fa det tilkoblet, men egentlig bare det har den separate regelspalten i forste omgang som synes a ha mest mulig utbytte.

Det er en veldig fin mate a utforme hoyden pa et element som har oversikten & # 8221; eiendom. Ellers glir omrisset inn i n rliggende elementer, med mindre du angir en margin. Takk for at du sendte inn dette! Det er virkelig flott!

Kudos for sak nr. 2. Dette er det beste vi kan bruke det til!

Calc () kan ogsa eliminere behovet for innvendige innpakningselementelementer (som i for eksempel 100% breddebakgrunn med fast breddeinnhold) ved a legge pa padding: 0 calc (50% – sitewidth / 2 ) til foreldreelementet. Eksempel her.

Dette virker selvsagt ikke med boks storrelse: grenseboksen, men du kan ga tilbake til det aktuelle elementet tilbake til innholdsboksen som vist i eksemplet.

Jeg mener, hvis det er mulig, hvem ikke ville foretrekke dette:

Nr. 2 er en stor seier.

Min opprinnelige tanke var at dette ville v re et godt alternativ til grenseboksen, men som du sier, overstyrer nettleserens kompatibilitet en slags mulighet.

Jeg ville bruke dette til vertikal sentrering. Jeg legger et bilde i et fast hoyde / breddeomslag og provde a gjore noe slikt:

Bade FF og Chrome tolker det som -25%. Og de gjor det basert pa bredden til foreldrene, i stedet for hoyden. Sa, det virker ikke som a jobbe for det programmet.

Noen har en bedre losning ved a bruke calc ()? Virker som om det ville v re et godt alternativ til a legge til en ekstra omslag og bruke negative marginer.

Ingen av eksemplene dine ser ut til a fungere skikkelig i Firefox, fordi det fortsatt ikke stotter den ubegrensede versjonen av & # 8220; boksestorrelsen & # 8221; eiendom. Legger til en & # 8220; -moks-boks-storrelsesorden: rammefelt & # 8221; til din & # 8220; * & # 8221; regelen loser problemet.

Jeg brukte calc () for a sette opp et responsivt rutenett som har angitt breddeguttere, hvis du endrer & # 8220; $ siteWidth: 960px; & # 8221; i hvilken bredde du vil ha det, vil kolonnene endres i bredde, men gutters vil forbli det samme. Det jeg virkelig ser frem til, er a bruke calc () med CSS-variabel. Tenk deg a endre et rutenett uten a matte deklarere det hver gang med en medieforesporsel. Bare endre variabelen og hele gridet vil endres. Kinda sott.

Her er et ekte verdenseksempel. Jeg har et nettstedsside jeg legger sammen for en lokal honningstativ, og jeg bruker den til a eksperimentere med nyere CSS-funksjoner:

Hovedinnholdet DIV bruker CSS3 flere bakgrunner (honeycomb monster, gress [nederst] og bier [ogsa nederst]). For a plassere biene bruker jeg calc-egenskapen til a beregne helt ned til bunnen og deretter 25 piksler, opp igjen. En prosentandel virker ikke veldig bra fordi det vil variere ettersom mengden innhold varierer og pa grunn av andre faktorer, og en solid pixelantall ville ikke virke av samme grunner. Fortsatt a gjore noe pa tvers av nettlesertesting, men jeg tror jeg har riktig fallbacks pa plass.

I et annet notat bruker animasjonen jeg har brukt bare i Firefox. Vel, det fungerte ogsa i Chrome med -webkit-prefikset, men brot i Safari, sa jeg matte ta ut all-webkit-prefixing, og dessverre deaktiverer den dessverre ogsa i Chrome. Det skal begynne a fungere i en hvilken som helst nettleser som oppdaterer a ikke trenge prefiksene jeg hadde brukt.

CSS-Tricks * er laget, skrevet av, og vedlikeholdt av Chris Coyier og et team med hovne folk. Den er bygget pa WordPress, som er vert for Media Temple, og eiendelene serveres av MaxCDN. Det gjores mulig gjennom sponsorater fra produkter og tjenester vi liker.

* Kan eller inneholder ikke noen faktiske «CSS» eller «Triks».


Comments are closed.

Hilsen! Vil du spille i det mest populære kasinoet? Vi samlet det for deg. Klikk her nå!