CSS-vinkit, joita et todennäköisesti näe missään opetusohjelmassa

On CSS-sääntöjä, jotka löydät mistä tahansa opetusohjelmasta.

Ja sitten on olemassa CSS-sääntöjä, joita et löydä opetusohjelmista, mutta jotka kohtasivat heti, kun aloit koodauksen. Olen varma, että olet jo googellut elementin kohdistamisesta pystysuunnassa ja kuinka luodaan se monimutkainen asettelu. Emme puhu tästä.

Lopuksi on olemassa CSS-sääntöjä, joita et ole noudattanut yhdessäkään opetusohjelmassa, etkä voineet tietää. Olen kerännyt näitä vinkkejä ajan myötä, ja nyt olen päättänyt kirjoittaa artikkelin, toivoen, että ne voivat olla hyödyllisiä muille ihmisille.

Seuraava on mitä CSS-oppaat eivät koskaan opettaneet minulle.

Pehmustus on suhteessa vanhemman leveyteen

Kuinka monta kertaa olet käyttänyt suhteellisia yksiköitä CSS: ssä? Olen suuri fani heistä, koska he antavat sinun luoda reagoivan verkkosivuston sekoittamatta liikaa mediakyselyjä. Jos haluat asettaa elementin korkeuden puoliksi vanhemman korkeudesta, kirjoituskorkeus: 50% riittää.

Voit käyttää suhteellisia yksiköitä kaikkialla. Jos haluat lisätä jonkin verran etäisyyttä kahden pystysuoran elementin väliin, voit kirjoittaa marginaalin yläosan: 15% ja se tekee marginaalin. Etäisyys on 15% vanhemman korkeudesta. Luulen, että tiedät jo tämän, enkä halua tuhlata aikaasi. Mutta ehkä et tiedä, että se ei ole niin triviaalia.

Joissakin tilanteissa on parempi, jos käytät pehmustetta marginaalin sijasta. Mutta kun asetat toppeja: 15% ... mitä helvettiä?

Se ei toimi odotetulla tavalla. Tämä ei ole suhteessa vanhemman pituuteen. Mitä tapahtuu?

Ratkaisu

Se on suhteessa vanhemman leveyteen.

Haluatko käytännön esittelyn? Tässä se on:

Pelkää vain muuttamalla vanhempien leveyttä ja katso kuinka lasten pehmuste vaikuttaa.

Se voi aluksi näyttää oudolta, mutta siihen on tosiasiallisesti merkityksellinen syy. Voit löytää sen lukemalla CSS-eritelmät…

Ei, vitsailen - ei ole selitystä miksi näin tapahtuu. Tai ainakaan en löytänyt sitä mistään. Se toimii vain näin, joten pidä se mielessä.

Vaikka emme ehkä ymmärrä syytä, miksi insinöörit tekivät sen, voimme käyttää tätä ominaisuutta etumme. Jos meillä on elementti ja asetamme seuraavat:

.näkyvä {
  korkeus: auto;
  leveys: 100px;
}
.child {
  padding-top: 100%;
}

Tällöin elementin korkeus on yhtä suuri kuin lapsen korkeus, koska asetamme korkeuden: automaattinen. Toisaalta lapsen korkeus on sama kuin vanhemman leveys, koska asetamme pehmusteen: 100%. Tuloksena on neliö, ja elementti pitää saman suhteen missä tahansa koossa.

Tässä on toimiva esimerkki:

Jos vaihdat pehmusteen: 100% millä tahansa muulla prosentilla, saat suorakulmion. Lisäksi, jos muutat leveyttä, suhde säilyy aina.

Muunnos voi pinota sääntöjä

Jos opiskelisit tietojenkäsittelytiedettä, muistat varmasti tuon kilpikonnan ja sen suorakaiteen kynän. Tämä koulutuskonsepti tunnetaan virallisemmin kilpikonnagrafiikana, ja sen tavoitteena on ohjata kilpikonna polulla yksinkertaisten ohjeiden avulla askel askeleelta, kuten “20 askelta eteenpäin” ja “kiertää 90 astetta”.

Entä jos CSS: n avulla voisit sanoa lohkon liikuttamiseksi ”20 pikseliä oikealle” suhteessa sen nykyiseen sijaintiin, ei alkukohtaan? Entä jos sanon, että voit tehdä sen muunnosominaisuuden avulla?

Monet kehittäjät eivät tiedä, että muunnos voi kerätä useampia kuin yhden säännön, ja n + 1-sääntö on suhteessa n: nteen sääntöyn saavutettuun asemaan, eikä sen lähtöasentoon.

Oletko hämmentynyt?

Ehkä tämä kynä voi puhdistaa mielesi:

Huomaa, että emme käyttäneet JavaScript-muuttujia nykyisen sijainnin tai nykyisen rotaation tallentamiseksi. Tätä tietoa ei säilytetä missään! Ratkaisu on yksinkertainen, jos kirjoitat:

muunnos: translateX (20px);

Lisää sitten uusi sääntö:

muuntaa: translateX (20px) translateX (40px)

Toinen sääntö ei korvaa ensimmäistä, mutta niitä sovelletaan yksi kerrallaan, peräkkäin. Se, että niitä sovelletaan peräkkäin, on tärkeä. Kun kierrät elementtiä, käännät myös referenssijärjestelmää, ja muut säännöt ovat suhteessa uuteen referenssijärjestelmään. Niin:

muuntaa: kiertääZ (20deg) translateX (30px)

on erilainen kuin:

muuntaa: translateX (30px) kiertääZ (20deg)

Voit myös yhdistää erilaisia ​​yksiköitä. Voit esimerkiksi keskittää 600 pikselin suuren jaon tällä tavalla:

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

Mutta jos et aio animoida sitä, ehkä calc () on parempi vaihtoehto.

Jos mietit kilpikonna, luin tämän toisen katkelman, joka luo uudelleen dynamiikan:

Valitettavasti se ei vielä piirtä. Mutta jos haluat, voit aina ottaa käyttöön kynätoiminnon.

Marginaalit ja pehmusteet menevät keskipäivästä keskiyöhön

Tämä on helppoa, ja monet teistä ajattelevat sen olevan triviaalia, mutta näin niin monta ihmistä kamppailevan quadruplien kanssa, että lopetin sen pitämisen itsestään selvänä.

Monet kehittäjät eivät tiedä, että melkein jokaisella CSS-ominaisuudella on lyhyt vaihtoehto. Muut kehittäjät tietävät sen, mutta käyttävät edelleen tiettyjä ominaisuuksia, koska eivät koskaan muista tilausta.

Annan antaa sinulle vinkki:

Reunat ja rajat menevät keskipäivästä keskiyöhön.

Osaan selittää sen paremmin. Voit varmasti käyttää:

padding-top: 3px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 3px;

Mutta voit käyttää myös shortand-vaihtoehtoa:

pehmuste: 3xx 6xx 3xx 6xx;

Tilauksen muistamista koskeva sääntö on helppo - katso vain tätä kelloa:

Aloita klo 12.00 ja jatka myötäpäivään. Saat oikean tilauksen.

Jos sen sijaan käytät vain kahta arvoa:

täyte: 2px 4px;

Selainmoottori laajentaa sitä toistamalla parin:

täyte: 2px 4xx 2xx 4xx;

Ja lopulta, jos käytät kolmea arvoa:

täyte: 2x 4xx 6xx;

Selaimen moottori käyttää keskiarvoa sekä vasemmalle että oikealle, aivan kuin jos kirjoitit:

täyte: 2px 4xx 6xx 4xx;

Tausta tukee useita kuvia

Tämä on yksi harvemmin tunnetuista ominaisuuksista, vaikka sitä tuetaan laajasti.

Tiedät, että voit määrittää kuvan URL-osoitteen taustaominaisuuden sisällä, mutta jos tarvitset sitä, voit itse lisätä niin monta kuvaa kuin haluat. Sinun on erotettava heidät pilkulla:

tausta: url ('ensimmäinen kuva.jpeg') vasemmassa yläkulmassa,
            url ('toinen kuva.jpeg') alhaalla oikealla;

Miksi tästä voi olla hyötyä? Mitä mieltä olet Linus Torvaldsista CSS: n tuottaman auringonnousun edessä?

Voit myös neliön suorakaiteen muotoisen kuvan lisäämällä ne varjostetut reunat, jotka ovat erittäin kuuluisia Instagramissa. Tämän saavuttamiseksi minun piti toistaa sama kuva kahdesti ja zoomata taustakuvaa 5x:

Tunnista kosketusnäyttölaitteet

Mediakyselyjen ansiosta voimme saada verkkosivustomme reagoimaan ja antaa asettelun mukautua moniin näytön kokoihin. Mutta tämä ei riitä!

Älypuhelimet, tabletit ja klassiset henkilökohtaiset tietokoneet ovat luonteeltaan erilaisia. Näytön koosta riippumatta.

Kosketusnäyttölaitteessa voit napata, pyyhkäistä ja nipistää, ja HammerJS: n kaltaiset työkalut auttavat sinua. Hiirellä napsautat vain, mutta tarkemmin. Jos teit verkkosivustosi mukautuvaksi eri näytökokoihin, saatat ehkä harkita sen tekemistä reagoivaksi myös muihin suuntiin ja tukea erilaisia ​​sisääntulotyyppejä!

Sinun ei tarvitse monimutkaista JavaScriptiä tunnistaaksesi käyttäjäagentin. Tarvitset vain CSS:

@media (mikä tahansa osoitin: hieno) {
  / *
    Näitä sääntöjä sovelletaan kosketusnäyttölaitteisiin
  * /
}
@media (mikä tahansa osoitin: karkea) {
  / *
    Näitä sääntöjä sovelletaan vain kosketusnäyttölaitteisiin
  * /
}

Tässä on esimerkki:

Pro-vinkki: Sinun ei tarvitse älypuhelinta säännön testaamiseen, voit simuloida kosketusnäyttölaitetta Google Chromen dev-työkaluissa napsauttamalla tätä kuvaketta:

Pidän sitä erittäin hyödyllisenä enkä tiedä miksi se ei ole levinnyt, vaikka sitä tuetaan kunnolla. Esimerkiksi käytin sitä karusellissa piilottamaan chevrons-kuvakkeet kosketusnäyttölaitteissa tarjotakseen natiivimman kokemuksen.

Ja lopulta voit myös antaa tiedoston touchscreen.css ja tuoda sen ehdollisesti:

@import url ('touchscreen.css') -näyttö ja (mikä tahansa osoitin: karkea);

Huomaa: Firefox ei tällä hetkellä tue tätä, kuten voit nähdä sivustolla caniuse.com

Marginaalit haluavat romahtaa

Pidä silmällä portaita. He haluavat muuttaa.
Percy Weasley - Harry Potter

Pidän CSS: stä: se on selkeä, säännöllinen ja tyylikäs kieli - kaikki mitä kehittäjä voi koskaan pyytää.

Käytät sääntöä, ja se toimii. Mutta kun luulin tuntevani CSS: n, tapahtui näin:

Mitä helvettiä täällä tapahtuu? Luulet todennäköisesti, että tekstissä on reunus otsikon sisällä, mutta se yrittää vetää otsikon sen sijaan. Tämä ei ole mitä halusin.

Myöhemmin huomasin, että marginaalit haluavat romahtaa.

Mitä tuo tarkoittaa? Oletetaan, että haluamme luoda seuraavan sisäkkäisen asettelun:

Joten loimme merkinnät kolmelle elementille ja asetimme eri korkeuden ja erilaisen marginaalin jokaiselle niistä. Sen pitäisi toimia, eikö? Väärä.

Jos teet sen, selaimesi huomaa kolme vierekkäistä marginaalilohkoa, ja se haluaa yhdistää ne yhteen, ainutlaatuiseen, suureen marginaalilohkoon.

Siksi tulos näyttää tältä:

Miksi näin tapahtuu? Minä en tiedä. Tämä on CSS: n historiallinen piirre. Oletan, että kun CSS alunperin standardisoitiin, marginaalit eivät olleet suuri kysymys ja asettelut eivät olleet niin monimutkaisia ​​kuin nykyään. Joten insinöörit saattoivat ajatella, että se oli hyödyllinen ominaisuus. Nyt sillä ei ole mitään järkeä.

Jos olet kehittänyt CSS: ää vuosien ajan, etkä ole koskaan tavannut tätä ongelmaa, syynä on, että marginaalit romahtavat vain, kun:

  • marginaalit ovat pystysuorat (sitä ei tapahdu vaakasuuntaisille marginaaleille)
  • ulommat elementit eivät sisällä tekstiä tai muuta sisältöä
  • pehmusteita tai reunuksia ei ole asetettu
  • näyttö on "estää"
  • ylivuoto on erilainen kuin ”alkuperäinen”
  • marginaalit eivät ole negatiivisia

Ja luettelo jatkuu. Jos kohtaat tämän ongelman, voit vain kumota yhden näistä ehdoista (paitsi ensimmäisen) ja marginaalit kesytetään. Voit myös välttää marginaalin käyttämistä ja käyttää sen sijaan yläosaa ja pehmustetta.

Huomaa, että hänen voi tapahtua myös sisaruselementtejä. Jos sinulla on kaksi sisaruselementtiä toistensa päällä ja asetat marginaalipohjan: 30 pikseliä ensimmäiseen ja marginaalikannan: 60px toiseen, pienin romahtaa. Tulosmarginaali ei ole 30 + 60 = 90px, mutta se on max (30, 60) = 60px.

Lopulliset ajatukset

Siinä kaikki! Toivon, etten tuhlanut aikaa tämän artikkelin kanssa, ja että olet oppinut jotain arvokasta.

Jos pidit viestistä, voit napsauttaa vasemmalla puolella olevaa aplodit-painiketta. Voit antaa minulle jopa 50 tappaa: D

Jos sinulla on kysymyksiä, kysymyksiä tai haluat vain kertoa minulle, mitä opetusohjelmassa ei opetettu, jätä kommentti alla olevaan kohtaan, ja huolestuneisuutesi arvostetaan!

- Christian Vincenzo Traina