Olùdín àti Olùmúlẹ́wa CSS Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

Irinṣẹ́ yìí ń lo tokenizer CSS tí a fi ọwọ́ kọ, tí kò ní ìgbẹ́kẹ̀lé lórí ohunkóhun mìíràn, tí a kọ́ pátápátá ní JavaScript — kò sí ìwé-ìṣirò ìta, kò sí ìpè sáfà. Tokenizer náà ń pín àmì kọ̀ọ̀kan sí kóòdù, ọ̀rọ̀-àsọyé, ọ̀wọ́ ọ̀rọ̀ tí a fi àmì hàn, tàbí iye url() kí ó tó fi àwọn ìyípadà èyíkéyìí sílo, èyí tí ó ń dí ìdíwọ́ fún àwọn òfin àyè láti bàjẹ́ àwọn ọ̀rọ̀ inú ọ̀wọ́ ọ̀rọ̀, àwọn URI dátà, tàbí àwọn gbólóhùn calc().

1. 1
   Ìgbésẹ̀ ìpín-àmì

   A ń ṣàyẹ̀wò CSS ìbáwọlé àmì-lé-àmì tí a sì pín in sí àwọn àmì tí a dá àmì sí: àwọn apá kóòdù gan-an, àwọn ọ̀rọ̀-àsọyé /* ... */, àwọn ọ̀wọ́ ọ̀rọ̀ tí a fi àmì hàn (tí ó ń pa àwọn ìtẹ̀síwájú escape mọ́), àti àwọn àkọ́sílẹ̀ url(...). Èyí ń rí i dájú pé àwọn ìyípadà nínú ìgbésẹ̀ tí ó tẹ̀lé kì í kan kóòdù CSS gan-an nìkan — kì í ṣe àwọn ọ̀rọ̀ inú ọ̀wọ́-ọ̀rọ̀ tàbí URI dátà láé.
2. 2
   Minification tàbí ẹwà

   Ní ipò minify, a ń yọ àwọn ọ̀rọ̀-àsọyé déédéé kúrò (a ń pa àwọn ọ̀rọ̀-àsọyé /*! license */ mọ́), àwọn ìṣàn àyè nínú àwọn àmì kóòdù ni a kó pọ̀ sí àyè kan, àti àyè tí ó wà lẹ́gbẹ̀ẹ́ àmì-ìdúró yíká { } : ; , > ~ ni a yọ kúrò. A fi àyè yíká + àti - sílẹ̀ láṣàrọ́ láti yẹra fún bíbàjẹ́ àwọn gbólóhùn calc(). Ní ipò ẹwà, a kọ́kọ́ ṣe minify kóòdù náà sí ìpìlẹ̀ tí ó mọ́, kí a sì tún pín in sí àmì tí a sì tún ṣe ìlà pẹ̀lú ìtọpasẹ̀ ìjìnlẹ̀ àyè-méjì àti ìdámọ̀ declaration-colon láti yà colon property: value sọ́tọ̀ sí colon àyàn bí a:hover.
3. 3
   Ìṣírò ìwọ̀n gzip

   Lẹ́yìn tí a bá mú ìtọjade náà jáde, a ń lo API CompressionStream abínibí aṣàwákiri láti kó àbájáde náà pọ̀ pẹ̀lú gzip a sì ń wọn iye byte tí ó jáde. Èyí ń fún ìṣírò ìwọ̀n-gbígbé gidi tí ó bára mu ohun tí sáfà wẹ́ẹ̀bù kan tí ó ní gzip yóò fi ránṣẹ́ lórí nẹ́tíwọ́ọ̀kì.
4. 4
   Dàkọ tàbí gbà

   A ń kọ CSS tí a ṣiṣẹ́ padà sí clipboard nípasẹ̀ API Clipboard, tàbí a gbà á gẹ́gẹ́ bí styles.min.css (ipò minify) tàbí styles.css (ipò ẹwà) ní lílo Blob pẹ̀lú irú MIME text/css. A ń fi ìdín ìwọ̀n hàn láàyè bí o ṣe ń kọ.

Àwọn Irinṣẹ Tó Jọra