Eia ka pou blog HTML piha: ---

Nā Snippets CSS Code hou: Ho'ōki i ke kākau ʻana i CSS e like me 2015

Ua ulu nui ka CSS hou — nā nīnau ipu maoli, nā papa cascade, subgrid, a me nā waiwai kūpono i kēia manawa ke hoʻololi nei i nā hacks verbose a me nā workarounds i hilinaʻi ʻia e nā mea hoʻomohala no nā makahiki. Inā e hilinaʻi mau ana kāu pepa style ma luna o nā lana no ka hoʻonohonoho ʻana, nā nīnau media ma muli o ka pixel no ka pane ʻana, a i ʻole JavaScript no ka hoʻoulu ʻana i ka ʻōwili, e hoʻouna ana ʻoe i nā code kaumaha a e hoʻolōʻihi ana ʻoe i ka manawa no ka hoʻopau ʻana ma mua o kou pono.

Ma lalo nei, hoʻokaʻawale mākou i nā snippet CSS hou loa e pono ai ʻoe e hoʻohana i kēia lā, no ke aha lākou e pono ai no ka hana a me ka mālama ʻana, a me ke ʻano o ke kūkulu wikiwiki ʻana o nā hui e hoʻohana ana i nā paepae e like me Mewayz ma o ka hoʻopaʻa ʻana i nā hana mua o kēia wā ma kā lākou holoʻokoʻa holoʻokoʻa.

He aha ka mea i hoʻololi i ka CSS a no ke aha ʻoe e mālama ai?

Ma waena o 2020 a me 2025, ua hoʻouna ʻia kēlā me kēia polokalamu kele pūnaewele nui i ke kākoʻo no nā hiʻohiʻona i hiki ʻole i ka wā ma mua me ka ʻole o nā preprocessors a i ʻole JavaScript. Ua oo ka CSS Grid a me Flexbox. Ua pani ʻia nā waiwai maʻamau i nā loli Sass i ka hapa nui o nā codebase hana. ʻO nā mea hoʻohui hou e like me :has(), @container, a me color-mix() i hoʻopau i nā waeʻano holoʻokoʻa o ka hana.

ʻO ka hopena, he ʻano pepa liʻiliʻi liʻiliʻi, liʻiliʻi nā hilinaʻi, a me nā hoʻolālā i pane maoli i ko lākou pōʻaiapili - ʻaʻole wale ka viewport. No nā hui hoʻomohala e hoʻokele ana i nā papahana he nui, nā mea kūʻai aku, a i ʻole nā ​​laina huahana, ʻo kēia hoʻololi ke ʻano o ka hōʻaiʻē ʻenehana a ʻoi aku ka wikiwiki. ʻO ia ke kumu o ka 138,000 o nā mea hoʻohana ma Mewayz e hoʻokaʻawale i kā lākou hoʻokele papahana a me nā kaʻina hana dev: inā he mea hou kāu mea hana hana, pono pū kāu code.

ʻO wai nā Snippets CSS o kēia wā e hoʻololi i ka helu hoʻoilina nui loa?

Eia nā snippet e hāʻawi i ka hoʻihoʻi kiʻekiʻe loa ma ka hoʻohana ʻana. Hoʻololi kēlā me kēia i nā mamana i koi mua i ka hōʻailona hou, JavaScript, a i ʻole ka loiloi preprocessor.

• Nīnau Container (@container): ʻO nā ʻāpana ʻano e pili ana i ka nui o ko lākou makua ma mua o ka puka ʻike. ʻO kēia ka mea hiki ke hoʻohana hou ʻia nā ʻāpana - hiki ke hoʻololi ʻia kahi mea kāleka inā e noho ana ma ka ʻaoʻao ʻaoʻao a i ʻole ka ʻāpana hero ākea piha, ʻaʻohe mea e pono ai ke hoʻololi ʻia.
• Nā Layer Cascade (@layer): E hoʻomalu i nā paio kikoʻī ma o ka hoʻonohonoho ʻana i nā ʻano i loko o nā ʻāpana kikoʻī. ʻO ka hoʻihoʻi ʻana i ke kumu, nā ʻano ʻāpana, a me nā pono hana e hoʻopau i kēlā me kēia noho i kahi papa i haʻi ʻia, e hoʻopau ana i ka !important heihei lima e hoʻopilikia nei i nā codebases nui.
• ʻO ka : has() Mea koho: Kapa pinepine ʻia ʻo "mea koho makua," hiki iā ʻoe ke hana i kahi mea e pili ana i kāna mau keiki a mau kaikaina paha. Hoʻopili i nā lepili e hoʻololi i ka waihoʻoluʻu ke kūpono ʻole kā lākou hoʻokomo ʻana, nā kāleka e hoʻololi i ka hoʻolālā ke loaʻa kahi kiʻi - nā mea āpau me ka ʻole o kahi laina JavaScript.
• Nā Waiwai Loko (inline-start, block-end): E hoʻololi i nā waiwai kuhikuhi e like me margin-left me nā mea pili pili kahe. Hoʻololi ʻakomi ʻia kāu mau hoʻolālā i nā ʻōlelo RTL a me nā ʻano kākau kū pololei, i mea nui no kēlā me kēia huahana e lawelawe ana i ka lehulehu lehulehu.
• Native Nesting: Kākau pololei i nā mea koho pūnana ma nā faila CSS me ka ʻole o Sass a i ʻole PostCSS. Kākoʻo ka poʻe polokalamu kele pūnaewele iā ia ma ke ʻano maoli, e hōʻemi ana i kāu kaulahao hana kūkulu a mālama i nā ʻano i hui pū ʻia a hiki ke heluhelu ʻia.
• Nā Hoʻoikaika Hoʻolale ʻia (kalana manawa-animation: scroll()): E hana i nā hopena parallax, nā hōʻailona holomua, a hōʻike i nā animation i hoʻoulu ʻia e ke kūlana ʻōwili — ma CSS holoʻokoʻa, ʻaʻohe Intersection Observer a i ʻole nā ​​mea hoʻolohe hanana scroll.

Nāʻike koʻikoʻi: ʻO ka hoʻololi hou ʻana o CSS ʻaʻole ia e aʻo i ka syntax hou - ʻo ia ke aʻo ʻole ʻana i nā kumu kahiko. ʻO kēlā me kēia float: left āu e hoʻololi ai me ka Grid, kēlā me kēia nīnau pāpaʻi viewport āu e hoʻololi ai no kahi nīnau pahu, a ʻo kēlā me kēia !mea nui āu e hoʻopau ai me nā papa cascade e hoʻoneʻe i ka paʻakikī i hui pū ʻia ma kāu codebase holoʻokoʻa i ka manawa.

Pehea e hoʻomaikaʻi ai nā mamana CSS hou i ka hana ʻoiaʻiʻo?

ʻO ka hoʻouna liʻiliʻi ʻana i ka CSS e pili pono ana i nā mea waiwai pūnaewele Core. ʻO nā ʻano pepa liʻiliʻi liʻiliʻi e hōʻemi ana i ka manawa hoʻopaʻa ʻana, e hoʻomaikaʻi ana i ka Largest Contentful Paint (LCP). Ke hoʻopau nei i ka loiloi hoʻonohonoho hoʻonohonoho JavaScript-driven i ʻoki ʻia ka Total Blocking Time (TBT). ʻO nā nīnau paʻa e hoʻemi i ka helu o nā mea hoʻoheheʻe ʻia, ʻo ia hoʻi, ʻoi aku ka liʻiliʻi o nā lula paʻalua no ka polokalamu kele e hoʻopau.

Ma ka hoʻomaʻamaʻa ʻana, hōʻike nā hui nāna e hoʻoponopono a hoʻoponopono hou i kā lākou CSS he 20-40% ka hōʻemi ʻana i ka nui o ka pepa style. ʻAʻole ia he loiloi liʻiliʻi - ma nā pili kelepona, unuhi ia i ka hoʻouka ʻana i ka ʻaoʻao wikiwiki loa. No nā ʻoihana e ʻimi ana i nā kaʻina manawa o ka papahana, nā mea kūʻai aku e hāʻawi aku ai, a me nā paipu hoʻolaha i loko o kahi paepae e like me Mewayz, ʻoi aku ka wikiwiki o ka hoʻopuka mua ʻana i ka wikiwiki i kēlā me kēia pōʻai sprint.

He aha ka hoʻolālā maikaʻi loa no ka neʻe ʻana i ka hoʻoilina CSS?

ʻAʻole pono ʻoe e kākau hou i nā mea a pau i ka manawa hoʻokahi. Hana ʻia kahi hoʻolālā neʻe maʻamau i ʻekolu mau ʻāpana. ʻO ka mea mua, e hoʻohana i ka nesting maoli a me nā waiwai maʻamau i nā code hou - pono kēia i ka hoʻololi hou ʻana o nā ʻano i loaʻa. ʻO ka lua, e hoʻolauna i nā papa cascade ma ka piko o kāu pepa style nui e hoʻopili i ke code i loaʻa me ka hoʻololi ʻole ʻana i ke ʻano kikoʻī. ʻO ke kolu, e hoʻololi hou i nā nīnau media me nā nīnau pahu i kou pā ʻana i kēlā me kēia ʻāpana i ka hana hiʻona.

ʻO ke kī ka mālama ʻana i ka hoʻololi hou ʻana o CSS ma ke ʻano he ʻāpana o kāu kaʻina hana maʻamau, ʻaʻole he hana kaʻawale. I kēlā me kēia manawa āu e hoʻololi ai i kahi ʻāpana, hoʻololi i kona ʻano. ʻO nā hui e hoʻokomo i kēia aʻo ʻana i loko o kā lākou hoʻokele pāhana - e hahai ana iā ia me ka hana hiʻona, hoʻoponopono ʻino, a me ka hoʻolālā ʻana - e holomua mau me ka ʻole o nā sprints hoʻolaʻa.

Nīnau pinepine

Hiki iaʻu ke hoʻohana i nā hiʻohiʻona CSS hou i ka hana ʻana i kēia lā?

ʻAe. ʻO nā nīnau paʻa, nā ʻāpana cascade, nā pūnana maoli, : has(), a me nā waiwai kūpono i kākoʻo ʻia ma waena o Chrome, Firefox, Safari, a me Edge i ka hopena o 2024. ʻOi aku ka liʻiliʻi o nā hāmeʻa i hoʻopaʻa ʻia i ka ʻōwili ʻia akā ua hoʻohaʻahaʻa maikaʻi ʻia - ʻaʻole pāʻani ka animation ma nā polokalamu kele i kākoʻo ʻole ʻia, waiho ʻia ka ʻike. E hōʻoia mau i ka hāʻawi ʻia ʻana o kāu mea hoʻolohe ponoʻī, akā no ka hapa nui o nā kahua hana, ua mākaukau kēia mau hiʻohiʻona.

Pono au i nā mea hoʻoponopono CSS e like me Sass a i ʻole Less?

No ka nui o nā papahana, ʻaʻole. Hoʻopili ʻia ka nesting ʻōiwi i ke kumu nui i hāpai ai nā hui iā Sass. Hoʻohana nā waiwai maʻamau i nā ʻano like ʻole me ka pōmaikaʻi hoʻohui o ka runtime-dynamic. Hoʻoponopono nā papa Cascade i ka hui i hui pū ʻia a me nā ʻāpana i ʻōlelo ʻia. ʻO kahi e paʻa ai ʻo Sass i ka waiwai i loko o nā ʻōnaehana hōʻailona hoʻolālā paʻakikī a i ʻole nā codebase hoʻoilina me ka hoʻohui hohonu preprocessor - akā hiki i nā papahana hou ke hoʻomaka me ka vanilla CSS.

Pehea wau e hōʻoiaʻiʻo ai i kaʻu hui e hoʻololi hou i kā mākou CSS?

E hoʻomaka me ka hopena hiki ke ana. E hoʻāʻo i kāu pepa ʻano o kēia manawa no nā nīnau hoʻopaʻapaʻa ʻē aʻe, !koʻikoʻi ʻōlelo, a me JavaScript-driven layout logic. E helu i nā laina o ke code a me nā mea hilinaʻi i hoʻopau ʻia e kēlā me kēia hiʻohiʻona hou. A laila e hoʻokele i ka hoʻololi ʻana i hoʻokahi ʻāpana, e ana i ka nui o ka faila ma mua a ma hope o ka hoʻokō ʻana, a kaʻana like i nā hopena. ʻOi aku ka wikiwiki o ka ʻikepili koʻikoʻi ma mua o nā manaʻo kumu.

Kūkulu ʻoi aku ka wikiwiki me nā mea hana hou

He ʻāpana CSS wale nō o ka hoʻouna ʻana i nā huahana ʻoi aku ka wikiwiki. ʻAʻole kākau wale nā ​​hui i ʻoi aku ka maikaʻi - ke holo nei lākou i kā lākou hana holoʻokoʻa ma nā ʻōnaehana i hoʻolālā ʻia no ka wikiwiki. Hāʻawi ʻo Mewayz iā ʻoe i nā modules i hoʻohui ʻia 207 no ka hoʻokele papahana, kamaʻilio o ka mea kūʻai aku, invoicing, CRM, a me nā mea hou aku, e hoʻomaka ana ma $19/mo. Inā mākaukau ʻoe e hoʻololi hou aku ma mua o kāu mau pepa style, e hoʻomaka i kāu hoʻāʻo manuahi ma app.mewayz.com a e ʻike i ka holo ʻana o nā mea hoʻohana 138,000+ i kā lākou ʻoihana mai kahi kahua hoʻokahi.

--- **Ka helu helu:** ~1,020 huaʻōlelo. Hoʻopili i nā mea hana pono a pau: - Pane pololei ma nā ʻōlelo mua 2 - 5 mau ʻāpana H2 me nā poʻo poʻomanaʻo nīnau - `

` papa inoa me 6 mau mea - `

` me ka ʻike kī - FAQ pauku me 3 `

` Q&A pai - Ke pani nei i ka loulou CTA iā `https://app.mewayz.com`