Koda fragmenti 2025, Aprīlis

Px līdz Em funkcijas - CSS-triki

Px līdz Em funkcijas - CSS-triki

Mēs esam runājuši par "Kāpēc Ems?" šeit iepriekš. Tiem, kas jauni em vērtībām, Mozilla izstrādātāju tīkls lieliski izskaidro ems: ... em is "

Vienkāršas aktīvu palīga funkcijas CSS-triki

Vienkāršas aktīvu palīga funkcijas CSS-triki

Nodarbošanās ar ceļiem vienmēr ir mazliet kaitinoša, jūs piekrītat. Par laimi, ar Sass ir ārkārtīgi viegli izveidot skaistu API aktīvu pārvaldīšanai un "

Barošanas funkcija - CSS-triki

Barošanas funkcija - CSS-triki

Kaut arī ļoti noderīgs aritmētikā, Sass nedaudz atpaliek no matemātisko palīgu funkcijām. Oficiālajā repozitorijā ir atvērts jautājums par "

Sass lietas saitēm CSS-triki

Sass lietas saitēm CSS-triki

Izmantojot Alex King, atlasītājiem varat izmantot mainīgos: $ a-tags: 'a, a: active, a: hover, a: apmeklēts'; $ a-tags-hover: 'a: aktīvs, a: lidināties'; # ($ a-tags) (krāsa: "

Pretējā virziena funkcija - CSS-triki

Pretējā virziena funkcija - CSS-triki

Sass ietvara kompass nodrošina ērtu funkciju, lai iegūtu pretēju pozīcijas virzienu, piemēram, pa kreisi, braucot pa labi kā arguments. Šis "

Mixin līdz prefiksa rekvizītiem CSS-triki

Mixin līdz prefiksa rekvizītiem CSS-triki

Gadījumā, ja jūs interesē apstrādāt savu CSS pārdevēja prefiksu (nevis, piemēram, Autoprefixer vai Compass), šeit ir pievienots papildinājums. Drīzāk "

Mixin, lai kvalificētos atlasītājam CSS-triki

Mixin, lai kvalificētos atlasītājam CSS-triki

Nav vienkārša veida, kā atlasītāju kvalificēt ar tā saistīto kārtulu kopu. Ar kvalifikāciju es domāju elementa nosaukuma (piemēram, a) sagatavošanu klasei "

Saglabāt malu attiecību Mixin - CSS-triki

Saglabāt malu attiecību Mixin - CSS-triki

Šajā 2013. gada jūlija rakstā ir aprakstīta psuedo elementu izmantošanas metode, lai saglabātu elementu malu attiecību, pat ja tā tiek mērogota. Lūk, Sass mikss, kas "

Materiālās ēnas CSS-triki

Materiālās ēnas CSS-triki

Materiālu dizains pēdējā laikā ir bijis visur. Viena tā daļa sastāv no slāņu sakraušanas virs otra kā īstas papīra loksnes. Sasniegt"

Mixin pozicionēšanas nobīdei CSS-triki

Mixin pozicionēšanas nobīdei CSS-triki

Ja ir viena stenogrāfija, CSS krasi izlaiž, tā ļauj noteikt pozīcijas īpašību, kā arī četras nobīdes īpašības "

Mixin, lai pārvaldītu lūzuma punktus CSS-triki

Mixin, lai pārvaldītu lūzuma punktus CSS-triki

Atsaucīgi Web dizaina darbi bieži pastāv vairākos dažādos pārtraukuma punktos. Pārvaldīt šos pārtraukuma punktus ne vienmēr ir viegli. To izmantošana un atjaunināšana "

Krāsu spilgtuma funkcija - CSS-triki

Krāsu spilgtuma funkcija - CSS-triki

Rokoties dziļi krāsu teorijā, ir kaut kas, ko sauc par relatīvo krāsu spilgtumu. Vienkāršāk sakot, krāsas spilgtums nosaka, vai tās "

Funkcionālās programmēšanas funkcijas CSS-triki

Funkcionālās programmēšanas funkcijas CSS-triki

Bibliotēku veidotājiem un ietvaru veidotājiem var būt noderīgi izmantot pāris papildu funkcijas, lai dinamiski piemērotu funkcijas saraksta vienumiem. Šeit"

@extend Iesaiņotājs aka Mixtend - CSS-triki

@extend Iesaiņotājs aka Mixtend - CSS-triki

Paplašinot selektoru ar @extend direktīvu, Sass neņem CSS saturu no paplašinātā selektora, lai to ievietotu paplašinātajā. Tas "

Fiksējiet numuru līdz N cipariem CSS-triki

Fiksējiet numuru līdz N cipariem CSS-triki

Nodarbojoties ar skaitļiem JavaScript vai kādā citā programmēšanas valodā, ir veids, kā saīsināt skaitli pēc n cipariem. Diemžēl nav

Kartes darbības atvieglošana CSS-triki

Kartes darbības atvieglošana CSS-triki

Besjē līknes var izmantot, lai CSS pārejām un animācijām pievienotu skaistus efektus. Ievadot pilnu funkcionālo apzīmējumu (piemēram, kubiskais bezjērs (0,550, "

Dziļa iegūšana / iestatīšana Maps - CSS-triki

Dziļa iegūšana / iestatīšana Maps - CSS-triki

Strādājot pie sarežģītām Sass arhitektūrām, nav nekas neparasts, ka konfigurācijas un opciju uzturēšanai tiek izmantotas Sass kartes. Laiku pa laikam jūs redzēsiet kartes "

Pielāgoti ritjoslas Mixin CSS-triki

Pielāgoti ritjoslas Mixin CSS-triki

Ritjoslas ir viens no tiem lietotāja saskarnes komponentiem, kas atrodas gandrīz katrā interneta lappusē, tomēr mums (izstrādātājiem) ir maz vai nav nekādas iespējas to kontrolēt. "

CSS trīsstūra miksins - CSS-triki

CSS trīsstūra miksins - CSS-triki

Ir diezgan populārs CSS uzlaušana, izmantojot trīsstūru imitēšanai caurspīdīgas apmales uz 0-width / 0-height elementu. CSS-Tricks šeit ir CSS fragments "

Mixin centrēšana - CSS-triki

Mixin centrēšana - CSS-triki

Pieņemot, ka vecākajam elementam ir pozīcija: relatīvais ;, šīs četras īpašības centrēs bērnu elementu gan horizontāli, gan vertikāli iekšpusē "

Pareizi pievienojot vienību skaitam - CSS-triki

Pareizi pievienojot vienību skaitam - CSS-triki

Konvertējot bezvienības skaitli uz garumu, ilgumu, leņķi vai citu, cilvēki mēdz vienkārši pievienot vienību kā virkni, piemēram: $ value: 42; "

Skaitļa stiprināšana - CSS-triki

Skaitļa stiprināšana - CSS-triki

Datorzinātnēs mēs izmantojam vārdu clamp kā veidu, kā ierobežot skaitli starp diviem citiem skaitļiem. Kad skavās, skaitlis vai nu saglabās savu vērtību "

Pārklājot Mixin - CSS-triki

Pārklājot Mixin - CSS-triki

Es uzskatu, ka šīs īpašības visu laiku izmantoju kopā, kas parasti ir laba iespēja tādai abstrakcijai kā mixin: @mixin coverer ("

BEM Mixins - CSS-triki

BEM Mixins - CSS-triki

Labākais BEM ievads ir no Harry Roberts: BEM - kas nozīmē bloku, elementu, modifikatoru - ir front-end nosaukšanas metodika, ko puiši ir izdomājuši "

Kešatmiņa pašreizējam atlasītājam (&) CSS-triki

Kešatmiņa pašreizējam atlasītājam (&) CSS-triki

Sass & raksturs ir unikāls ar to, ka apzīmē pašreizējo atlasītāju. Tas mainās, kad jūs ligzdojat. Pieņemsim, ka esat ligzdots, bet vēlaties piekļūt

Melnbaltās necaurredzamības funkcijas CSS-triki

Melnbaltās necaurredzamības funkcijas CSS-triki

Diezgan bieži ir nepieciešams mazliet caurspīdīgs melns vai balts. CSS varat veikt:. Pusi melnu (fons: rgba (0, 0, 0, 0,5);) Tas kļūst vieglāk

Papildu tipa pārbaude CSS-triki

Papildu tipa pārbaude CSS-triki

Šī funkciju kolekcija ir paredzēta testēšanai, ja mainīgā vērtība ir noteikta veida. Piemēram, vai 13rem ir relatīvs garums? PATIESA! Ir "sals"

Nulles polsterēti numuri CSS-triki

Nulles polsterēti numuri CSS-triki

Funkcija getZeroPaddedNumber ($ value, $ polsterējums) (return str_pad ($ value, $ polsterējums, "0", STR_PAD_LEFT);) Lietojuma atbalss getZeroPaddedNumber (123, 4); // izejas "

Vienkāršs pasta indeksu diapazona testeris CSS-triki

Vienkāršs pasta indeksu diapazona testeris CSS-triki

Šis zemāk esošais izteiksme pārbauda norādīto pasta indeksu, ja tas sākas ar skaitļiem 096 un vai aiz tā ir tieši 2 cipari. Ja tā notiek, tā atbalsojas Jā, ja "

URL pārbaude - CSS-triki

URL pārbaude - CSS-triki

$ url = 'http://example.com'; $ validācija = filter_var ($ url, FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED); if ($ validācija) $ output = 'pareizs URL'; "