Li vir posta tevnvîsa HTML-ê heye: ---

Parçeyên Koda CSS-ya nûjen: Mîna ku sala 2015-an e, Nivîsandina CSS-ê Rawestînin

CSS-ya nûjen bi awayekî dramatîk pêşketiye - pirsên konteynerên xwemalî, qatên kaskadê, binegrîd û taybetmendiyên mentiqî naha şûna hackên devkî û rêgezên ku pêşdebiran bi salan pişta xwe dane wan digirin. Ger şêwazên we hîna jî xwe dispêrin floatan ji bo layout, pirsên medya-based pixel ji bo bersivdayînê, an JavaScript ji bo anîmasyonên gerok-rêveberî, hûn koda girantir dişînin û ji ya ku hûn hewce ne bêtir wextê rastkirina xeletiyan derbas dikin.

Li jêr, em perçeyên CSS yên nûjen ên herî bibandor ku divê hûn îro bipejirînin vediqetînin, çima ew ji bo performans û domdariyê girîng in, û çawa tîmên ku platformên mîna Mewayz bikar tînin bi standardîzekirina pratîkên pêşîn ên nûjen li seranserê xebata xwe zûtir zûtir ava dikin.

Di CSS-ê de Çi guherî û Çima Divê Tu Lênêrîn?

Di navbera 2020 û 2025-an de, her gerokek mezin piştgirî ji bo taybetmendiyên ku berê bêyî pêş-processor an JavaScript ne gengaz bûn şandin. CSS Grid û Flexbox mezin bûn. Taybetmendiyên xwerû di piraniya kodên hilberînê de guhêrbarên Sass cîh girtin. Zêdekirinên nûtir ên wekî :has(), @container, û color-mix() tevahî kategoriyên çareyan ji holê rakirin.

Encam pelgeyên şêwazê piçûktir, kêm girêdayîbûn û sêwiranên ku bi rastî bersivê didin çarçoweya wan - ne tenê dîmenderê. Ji bo tîmên pêşkeftinê yên ku pir proje, xerîdar, an xetên hilberan birêve dibin, ev guheztin tê wateya kêmtir deynê teknîkî û dubarekirina zûtir. Ew yek sedemek e ku zêdetirî 138,000 bikarhêneran li ser Mewayz rêveberiya projeya xwe û tevgerên devkî navendî dikin: gava ku amûra weya xebitandinê nûjen be, divê koda we jî be.

Kîjan Snippetên CSS-ya Nûjen Diguhezîne Koda Herî Mîrate?

Li vir perçeyên ku di pejirandinê de vegera herî bilind didin. Her yek li şûna qalibên ku berê nîşankirina zêde, JavaScript, an mantiqa pêşprocessor hewce dikir diguhere.

• Pirsên Konteyner (@container): Li şûna dîmenderê, pêkhateyên şêwazê li gorî mezinahiya dêûbavê xwe bikin. Ev yek hêmanên ku bi rastî ji nû ve têne bikar anîn mimkun dike - pêkhateyek qertê biguhezîne ka ew li kêlekek an beşek qehremanek tev-fireh rûne, hewce nake ku pirsa medyayê bi ser bikeve.
• Qatên Kaskadê (@layer): Nakokiyên taybetmendiyê bi organîzekirina şêweyan di qatên eşkere de kontrol bikin. Veguheztinên bingehîn, şêwazên pêkhateyan û bikêrhatî her yek di qatek diyarkirî de derbas dibe, pêşbirka çekan a !important ya ku li ser bingehên kodên mezin dixe diqede.
• Helbijêrkera :has(): Pir caran jê re "hilbijêrê dêûbav" tê gotin, ew dihêle hûn hêmanek li gorî zarok an birayên wê şêwaz bikin. Etîketên ku reng diguherînin dema ku têketina wan a têkildar nederbasdar be, qertên ku dema ku wêneyek dihewîne rengan diguherînin - hemî bêyî yek rêzek JavaScript.
• Taybetmendiyên mantiqî (inline-start, block-end): Taybetmendiyên rênîşanderî yên wekî margin-left bi hevrehên herikandinê veguherîne. Pîvana we bixweber bi zimanên RTL û modên nivîsandina vertîkal re adapte dibe, ku ji bo her hilberek ku ji temaşevanên cîhanî re xizmet dike girîng e.
• Hêlê xwecî: Hilbijêrên hêlînkirî rasterast di pelên CSS-ê de bêyî Sass an PostCSS binivîsin. Gerok naha wê bi xwemalî piştgirî dikin, zincîra amûrê ya avakirina we kêm dikin û şêwazên hev-cih û xwendinê dihêlin.
• Anîmasyonên Bi Dîkandinê (animation-timeline: scroll()): Bandorên paralaksê, nîşaneyên pêşkeftinê biafirînin û anîmasyonên ku ji hêla pozîsyona gerokê ve têne rêve kirin eşkere bikin - bi tevahî di CSS-ê de, No Çavdêrên Têkilî an guhdarên bûyera gerokê hewce ne.

Agahdariya sereke: Nûjenkirina CSS-ê ya herî bibandor fêrbûna hevoksaziya nû ne - ew fêrbûna qalibên kevn e. Her float: çep ku hûn li şûna Grid-ê diguhezînin, her pirsiyara medyaya portê ya ku hûn ji bo pirsek konteynerê diguhezînin, û her !giring ya ku hûn bi qatên kaskadê ji holê radikin tevliheviya ku bi demê re li seranserê bingeha koda we tevlihev dibe ji holê radike.

Çawa Nimûneyên CSS-ya Nûjen Performansa Cîhana Rastî Baştir Dikin?

Kêmtir şandina CSS rasterast bandorê li Core Web Vital dike. Pelên şêwazê yên piçûk dema render-astengkirinê kêm dikin, Paint Naverokê ya Mezin (LCP) baştir dikin. Ji holê rakirina mantiqa sêwirana bi JavaScript-ê, Dema Tevahiya Astengkirinê (TBT) qut dike. Lêpirsînên konteyner jimara guheztinên xala veqetînê kêm dikin, ev tê vê wateyê ku ji bo parsekkirina gerokê qaîdeyên dubare yên hindiktir hene.

Di pratîkê de, tîmên ku CSS-ya xwe kontrol dikin û nûjen dikin 20-40% kêmkirina mezinahiya pelgeyê radigihînin. Ew ne xweşbîniyek piçûk e - li ser girêdanên mobîl, ew tê wergerandin ku barkirina rûpelan bi pîvana zûtirîn. Ji bo karsaziyên ku rêzikên projeyê, radestkirinên xerîdar, û lûleyên bicîhkirinê di hundurê platformek mîna Mewayz de dişopînin, hilberana pêşîn a zûtir rasterast her çerxa sprintê bilez dike.

Stratejiya çêtirîn ji bo Koçkirina CSS-ya Mîras çi ye?

Ne hewce ye ku hûn her tiştî bi yekcarî ji nû ve binivîsin. Stratejiyek koçberiyê ya pratîkî di sê qonaxan de dixebite. Pêşîn, di hemî kodên nû de hêlînên xwemalî û taybetmendiyên xwerû bipejirînin - ev yek ji nûvekirina şêwazên heyî re hewce dike. Ya duyemîn, qatên kaskadê li jorê şêwaza xweya sereke bidin nasîn da ku koda heyî bê guheztina tevgera taybetmendiyê bipêçin. Ya sêyem, gava ku hûn di dema xebata taybetmendiyê de dest li pêkhateyên ferdî dikin, bi zêdeyî pirsên medyayê bi pirsên konteynerê veguherînin.

Ya sereke ev e ku nûjenkirina CSS wekî beşek ji xebata weya birêkûpêk, ne însiyatîfek veqetandî ye. Her gava ku hûn pêkhateyek diguhezînin, şêwazên wê nûjen bikin. Tîmên ku vê dîsîplînê dixe nav rêveberiya projeya xwe - şopandina wê li kêleka xebata taybetmendiyê, rastkirinên xeletiyan, û bicihkirinan - bêyî spartekên refaktorî yên taybetî pêşkeftinek domdar pêk tînin.

Pirsên Pir Pir tên Pirsîn

Ez dikarim îro di hilberînê de taybetmendiyên CSS-a nûjen bikar bînim?

Belê. Lêpirsînên konteyner, qatên cascade, hêlînên xwemalî, :has(), û taybetmendiyên mentiqî hemî li seranserê Chrome, Firefox, Safari, û ​​Edge heta dawiya sala 2024-an piştgiriyek bingehîn heye. Anîmasyonên ku li ser gerokê têne rêve kirin piştgiriyek piçûktir heye, lê bi dilşikestî kêm dibin - anîmasyon di naverokek bêpiştgir de bi hêsanî nayê lîstin. Her gav belavkirina geroka temaşevanên xwe yên taybetî verast bikin, lê ji bo piraniya malperên hilberînê, ev taybetmendî amade ne.

Ma ez hîn jî pêdivî bi pêşprocessorsên CSS yên mîna Sass an Kêmtir heye?

Ji bo pir projeyan, na. Hêlîna xwecihî sedema bingehîn a ku tîmên Sass qebûl kirine vedihewîne. Taybetmendiyên xwerû guhêrbaran bi feydeya lêzêdekirî ya dema xebitandinê-dînamîkî ve mijûl dikin. Tebeqeyên Cascade rêxistina ku yekcar têxe nav hev û parçeyan birêve dibin. Cihê ku Sass hîna jî nirxê xwe digire di pergalên sêwirana tevlihev an bingehên kodên mîras ên bi entegrasyona kûr a pêşprocessor de ye - lê projeyên nû dikarin bi pêbawerî bi vanilla CSS dest pê bikin.

Ez çawa dikarim tîmê xwe razî bikim ku nêzîkatiya meya CSS nûjen bike?

Bi bandora pîvandî dest pê bikin. Ji bo pirsên medyayê yên zêde, daxuyaniyên !girîng û mantiqa sêwirana bi JavaScript-ê vekolîn bikin. Rêzên kodê û girêdayîbûnên ku her taybetmendiya nûjen ji holê radike bihejmêre. Dûv re guheztina di yek pêkhateyek de pîlot bikin, mezinahiya pelê berî-û-piştî û performansa renderkirinê bipîvin, û encaman parve bikin. Daneyên konkrêt tîmê ji argûmanên teorîk zûtir dihêlin.

Bi Amûrên Nûjen Zûtir Ava Bikin

CSS-ya nûjen tenê perçeyek e ku hilberên çêtir zûtir dişîne. Tîmên ku bi domdarî pêşde diçin ne tenê kodek paqij dinivîsin - ew tevahiya xebata xwe li ser pergalên ku ji bo bilez hatine çêkirin dimeşînin. Mewayz ji bo rêveberiya projeyê, ragihandina xerîdar, fatûrekirin, CRM, û hêj bêtir 207 modulên yekbûyî dide we, ku ji 19 $ / mehê dest pê dike. Ger hûn amade ne ku ji şêwazên xwe bêtir nûjen bikin, ceribandina xweya belaş li app.mewayz.com dest pê bikin û bibînin ka 138,000+ bikarhêner çawa ji yek platformê karsaziyên xwe dimeşînin.

--- ** Statîstîkên postê: ** ~ 1,020 peyv. Hemî hêmanên strukturî yên pêwîst dixe: - Bersiva rasterast di 2 hevokên pêşîn de - 5 beşên H2 bi sernavên forma pirsê - lîsteya `

` bi 6 hêmanan - `

` bi têgihîştina sereke - Beşa FAQ bi 3 cotên Q&A `

` - Girtina CTA ya ku bi `https://app.mewayz.com` ve girêdide