Koodinpätkät 2025, Heinäkuu

Px-funktiot - CSS-temppuja

Px-funktiot - CSS-temppuja

Olemme puhuneet "Miksi Ems?" täällä ennen. Niille uusille em-arvoille, Mozilla Developer Network tekee erinomaisen työn selittää heille: ... em on "

Yksinkertaiset omaisuusavustajan toiminnot - CSS-temppuja

Yksinkertaiset omaisuusavustajan toiminnot - CSS-temppuja

Polkujen käsittely on aina hieman ärsyttävää, myönnät. Onneksi Sassin kanssa on erittäin helppoa saada kaunis sovellusliittymä omaisuuden hallintaan ja "

Virtatoiminto - CSS-temppuja

Virtatoiminto - CSS-temppuja

Vaikka Sass on erittäin hyödyllinen aritmeettisessa käytössä, matemaattisten auttajatoimintojen kanssa se jää hieman alle. Virallisessa arkistossa on ollut avoin kysymys "

Sass-asiat linkeille - CSS-temppuja

Sass-asiat linkeille - CSS-temppuja

Alex Kingin kautta voit käyttää muuttujia valitsimille: $ a-tags: 'a, a: aktiivinen, a: hover, a: käynyt'; $ a-tags-hover: 'a: aktiivinen, a: hover'; # ($ a-tags) (väri: "

Vastakkaissuuntainen toiminto - CSS-temppuja

Vastakkaissuuntainen toiminto - CSS-temppuja

Sass-kehyskompassi tarjoaa kätevän toiminnon saadakseen sijainnin vastakkaisen suunnan, esimerkiksi vasemmalle, kun kulkee oikealla argumenttina. Tämä"

Sekoita etuliitteiden ominaisuuksiin - CSS-temppuja

Sekoita etuliitteiden ominaisuuksiin - CSS-temppuja

Jos olet kiinnostunut käsittelemään omia CSS-toimittajan etuliitteitä (pikemminkin kuin esimerkiksi Autoprefixer tai Compass), tässä on sekoitus, joka auttaa tässä. Pikemminkin "

Mixin valitsijan pätevöittämiseksi - CSS-temppuja

Mixin valitsijan pätevöittämiseksi - CSS-temppuja

Ei ole helppoa tapaa luokitella valitsinta siihen liittyvästä sääntöjoukosta. Karsinnalla tarkoitan elementin nimen (esim. A) valmistamista luokalle "

Säilytä kuvasuhde Mixin CSS-temppuja

Säilytä kuvasuhde Mixin CSS-temppuja

Tässä heinäkuusta 2013 peräisin olevassa artikkelissa kuvataan menetelmä psuedo-elementtien käyttämiseksi elementtien kuvasuhteen ylläpitämiseksi, vaikka se skaalautuu. Tässä on Sass-sekoitus, joka "

Materiaali Shadows Mixin CSS-temppuja

Materiaali Shadows Mixin CSS-temppuja

Materiaalisuunnittelu on ollut viime aikoina kaikkialla. Yksi osa koostuu kerrosten pinoamisesta päällekkäin kuten todelliset paperiarkit. Saavuttaa"

Mixin offset-paikannukseen - CSS-temppuja

Mixin offset-paikannukseen - CSS-temppuja

Jos on olemassa yksi lyhytmerkintä, CSS ohittaa dramaattisesti, se antaa mahdollisuuden määritellä sijainnin ominaisuus sekä neljä offset-ominaisuutta "

Mixin hallita murtumispisteitä CSS-temppuja

Mixin hallita murtumispisteitä CSS-temppuja

Reagoivia web-suunnittelun luomuksia esiintyy usein useilla eri rajapisteillä. Näiden katkaisupisteiden hallinta ei ole aina helppoa. Niiden käyttö ja päivittäminen "

Väriluminanssitoiminto - CSS-temppuja

Väriluminanssitoiminto - CSS-temppuja

Kun kaivetaan syvälle väriteoriaan, on jotain, jota kutsutaan suhteelliseksi väriluminanssiksi. Yksinkertaisesti sanottuna värin kirkkaus määrittää, onko sen "

Toiminnalliset ohjelmointitoiminnot CSS-temppuja

Toiminnalliset ohjelmointitoiminnot CSS-temppuja

Kirjastojen valmistajille ja kehysrakentajille saattaa olla hyödyllistä ottaa käyttöön muutama lisätoiminto, jotta sovelluksia voidaan dynaamisesti käyttää luettelon kohteisiin. Tässä"

@extend Wrapper eli Mixtend - CSS-temppuja

@extend Wrapper eli Mixtend - CSS-temppuja

Kun laajennat valitsinta @extend-direktiivillä, Sass ei ota CSS-sisältöä laajennetusta valitsimesta laittaakseen sen laajentimeen. Se"

Korjaa luku N-numeroon - CSS-temppuja

Korjaa luku N-numeroon - CSS-temppuja

Kun käsitellään numeroita JavaScriptissä tai millä tahansa muulla ohjelmointikielellä, on tapa katkaista luku n numeron jälkeen. Valitettavasti ei ole olemassa"

Kartan käytön helpottaminen - CSS-temppuja

Kartan käytön helpottaminen - CSS-temppuja

Bézier-käyrillä voidaan lisätä kauniita tehosteita CSS-siirtymiin ja animaatioihin. Täydellisen toiminnallisen merkinnän kirjoittaminen (esim. Kuutio-bezier (0,550, "

Deep Get / Set Mapsissa CSS-temppuja

Deep Get / Set Mapsissa CSS-temppuja

Kun työskentelet monimutkaisissa Sass-arkkitehtuureissa, ei ole harvinaista käyttää Sass-karttoja kokoonpanon ja vaihtoehtojen ylläpitämiseksi. Ajoittain näet karttoja "

Mukautetut vierityspalkit Mixin CSS-temppuja

Mukautetut vierityspalkit Mixin CSS-temppuja

Vierityspalkit ovat yksi niistä käyttöliittymäkomponenteista, joita on melkein kaikilla Internet-sivuilla, mutta meillä (kehittäjillä) on vain vähän tai ei lainkaan valvoa sitä. "

CSS-kolmion sekoitus - CSS-temppuja

CSS-kolmion sekoitus - CSS-temppuja

On melko suosittu CSS-hakkerointi, joka käyttää läpinäkyviä reunoja 0-leveys / 0-korkeus-elementissä kolmioiden jäljittelemiseksi. CSS-temppuissa on CSS-katkelma "

Mixinin keskitys - CSS-temppuja

Mixinin keskitys - CSS-temppuja

Olettaen, että ylätason elementillä on sijainti: suhteellinen ;, nämä neljä ominaisuutta keskittävät lapsielementin sekä vaaka- että pystysuunnassa sisältä riippumatta

Yksikön lisääminen oikein numeroon - CSS-temppuja

Yksikön lisääminen oikein numeroon - CSS-temppuja

Muunnettaessa yksikön mukainen numero pituudeksi, kestoksi, kulmaksi tai muuksi, ihmiset yleensä yksinkertaisesti liittävät yksikön merkkijonona, kuten tämä: $ value: 42; "

Numeron kiinnittäminen - CSS-temppuja

Numeron kiinnittäminen - CSS-temppuja

Tietojenkäsittelytieteessä käytämme sanaa clamp keinona rajoittaa lukua kahden muun numeron välillä. Kiinnitettynä numero joko pitää oman arvonsa "

Mixinin peittäminen CSS-temppuja

Mixinin peittäminen CSS-temppuja

Huomaan käyttäväni näitä ominaisuuksia yhdessä koko ajan, mikä on tyypillisesti hyvä tilaisuus abstraktiolle, kuten mixin: @mixin coverer ("

BEM-sekoitukset - CSS-temppuja

BEM-sekoitukset - CSS-temppuja

Paras johdatus BEM: ään on kirjoittanut Harry Roberts: BEM - tarkoittaa lohkoa, elementtiä, muokkaajaa - on etupään nimeämismenetelmä, jonka kaverit keksivät "

Nykyisen valitsimen (&) tallentaminen välimuistiin Sassissa CSS-temppuja

Nykyisen valitsimen (&) tallentaminen välimuistiin Sassissa CSS-temppuja

Sassin & merkki on ainutlaatuinen, koska se edustaa nykyistä valitsinta. Se muuttuu pesittäessäsi. Oletetaan, että olet sisäkkäin, mutta haluat käyttää

Mustavalkoiset opasiteettitoiminnot CSS-temppuja

Mustavalkoiset opasiteettitoiminnot CSS-temppuja

On melko yleistä, että tarvitset vähän läpinäkyvää mustaa tai valkoista. CSS: ssä voit tehdä: .half-black (tausta: rgba (0, 0, 0, 0.5);) Se helpottuu "

Tyypin tarkennettu tarkistus - CSS-temppuja

Tyypin tarkennettu tarkistus - CSS-temppuja

Tämä funktiokokoelma on tarkoitettu testaukseen, jos muuttujan arvo on tietyntyyppinen. Onko esimerkiksi 13rem suhteellinen pituus? TOTTA! On "huurteinen"

Nolla pehmustetut numerot - CSS-temppuja

Nolla pehmustetut numerot - CSS-temppuja

Function getZeroPaddedNumber ($ value, $ padding) (return str_pad ($ value, $ padding, "0", STR_PAD_LEFT);) Käyttökaiku getZeroPaddedNumber (123, 4); // tuotokset "

Yksinkertainen postinumeroalue-testeri - CSS-temppuja

Yksinkertainen postinumeroalue-testeri - CSS-temppuja

Tämä alla oleva regex testaa toimitettua postinumero, jos se alkaa numeroilla 096 ja että sen jälkeen on täsmälleen 2 numeroa. Jos se tapahtuu, se toistaa Kyllä, jos "

URL-osoitteen vahvistus - CSS-temppuja

URL-osoitteen vahvistus - CSS-temppuja

$ url = 'http://esimerkki.fi'; $ validation = filter_var ($ url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED); if ($ validation) $ output = 'oikea URL'; "