Julias 8 beste CSS-tips: - Fikk sjokk da jeg fant ut dette!

Sentrer vertikalt med én linje CSS, endre farger på checkbox-er og vrak media queries.

Julia Jakobsen har mange gode CSS og design-tips - blant annet å endre farger du kanskje ikke visste at du kunne endre. 📸: Privat / kode24
Julia Jakobsen har mange gode CSS og design-tips - blant annet å endre farger du kanskje ikke visste at du kunne endre. 📸: Privat / kode24 Vis mer

De fleste har vært der; på side fire av Google-søket, desperat etter den ene tutorialen som har nøyaktig den CSS-løsningen du leter etter, men som kan løses på noen få linjer i stedet for den mile-lange løsningen du fant på side én.

Og man tenker: Kunne det ikke bare finnes en offisiell metode for dette?

I dette innlegget skal jeg dele noen kule CSS-tips som kanskje kan redde nettopp din utvikler-dag. ✨

#1. Endre farge på checkboxes og radio-buttons

Personlig fikk jeg sjokk da jeg fant ut av dette etter fire timer med aggressiv googling:

Man kan endre fargen på checkboxer og radio-buttons med kun én linje CSS!

input {
accent-color: aliceBlue;
}

#2. Smarte selectors

I et tilfelle der du trenger en viss style på kun det første eller siste child-elementet, krever det som regel at man først lager generelle styles for alle children, for så å spesifisere styles for unntaket. Eller? Hvis man tenker på det omvendt, skal man aktivere en style, ikke deaktivere den.

Så i stedet for å gjøre slik:

.listItem {
margin-bottom: 1em;
}

.listItem:last-of-type {
margin-bottom: 0;
}

...kan man gjøre slik:

.listItem:not(:last-of-type) {
margin-bottom: 1em;
}

#3. Gjem elementer når de er tomme

Det finnes mange måter å gjøre dette på. Men her er en relativt enkelt en!

Skjul elementet hvis det ikke returnerer noe og ikke har noe whitespace:

.thing:empty {
display: none;
}

#4. Generer hvilken som helst form

Jeg trengte å lage en trekant en gang og endte opp med å bruke CSS-borders til å lage den. Spoiler alert: Det var unødvendig mye kode, den var fullstendig ubrukelig og jeg ble mildt roastet (det var nødvendig).

Så fant jeg ut om clip-path! Med clip-path kan man altså lage hvilken som helst form, men det kan være vanskelig å kalkulere alle punktene. Derfor er denne generatoren genial:

cssportal.com/css-clip-path-generator/

Her kan du bruke forhåndslagde former eller lage en selv, også generer den CSS-en for deg! #LongLiveLaziness

#5. Endre en SVG sin viewbox enkelt

Altfor mange ganger har jeg vært i en situasjon der jeg har brukt en SVG med skjev viewbox, og altfor mange ganger har jeg også prøvd og feilet med å rette opp denne viewbox-en.

Heldigvis fant jeg en CodePen som hjelper deg med dette:

codepen.io/designcourse/live/mdydjBa

Bare last opp din SVG og bruk sliderne til å justere. Til slutt bare kopierer du den genererte koden og erstatter viewboxen i SVG-filen.

#6. Sentrer et element både horisontalt og vertikalt

Er det ikke sånn at man blir vurdert hvor god utvikler man er ut ifra hvordan man sentrerer et element? Neida, men det finnes mange løsninger på dette.

Den mest effektive er kanskje denne, på bare to linjer:

.center-stuff-inside {
display: grid;
place-items: center;
}

#7. Legg skråhet på elementer

Har du noen gang trengt at et rektangel har skråhet? Det kan gjøres med clip-art, men en enklere løsning er én linje CSS:

.rectangle {
transform: skewX(2deg);
}

Dette kan gjøres både med Y og X-aksen.

#8. Legg Media Queries igjen i 2021

Media Queries er veldig nyttig når det kommer til responsiv styling, men det finnes en enda enklere måte å legge til responsive styles: Clamp() kan gjøre dette for deg.

Den tar inn en minimums-verdi, en default-verdi og en max-verdi som bestemmer hvordan et element skal skalere fra liten skjerm til stor skjerm. Her er et eksempel med skrift-størrelse:

.text {
font-size: clamp(14px, 16px, 18px);
}

Håper disse små tipsene kan gjøre din hverdag som utvikler litt lettere, 😎