ຂ້ອຍຈະຫຍໍ້ CSS ອອນລາຍໂດຍບໍ່ຕິດຕັ້ງຫຍັງໄດ້ແນວໃດ?

ວາງ CSS ຂອງທ່ານໃນ CSS ປ້ອນເຂົ້າ, ຫຼື ວາງໄຟລ໌ .css, ຈາກນັ້ນກົດ ຫຍໍ້ CSS. ຄຳຄິດເຫັນ ແລະ ຊ່ອງຫວ່າງເກີນຖືກລຶບ, ແລະ ທ່ານສາມາດ ສຳເນົາ ຜົນລັບ ຫຼື ດາວໂຫຼດ ເປັນ styles.min.css.

ຕົວຫຍໍ້ CSS ຮັກສາຄຳຄິດເຫັນໃບອະນຸຍາດ ແລະ data URI ໄວ້ຄົບບໍ?

ແມ່ນ. ຄຳຄິດເຫັນທຳມະດາຖືກຕັດ, ແຕ່ຄຳຄິດເຫັນ /*! license */ ຖືກຮັກສາໄວ້. ສະຕຣິງໃນວົງຢືມ, ຄ່າ url() ແລະ data URI ຖືກແຍກເປັນ token ຕ່າງຫາກ, ດັ່ງນັ້ນກົດຊ່ອງຫວ່າງຈຶ່ງບໍ່ປ່ຽນພວກມັນ.

ຂ້ອຍຈະປ່ຽນ CSS ທີ່ຫຍໍ້ແລ້ວກັບເປັນໂຄດທີ່ອ່ານໄດ້ແນວໃດ?

ກົດ ຈັດ CSS ໃຫ້ສວຍ ແທນ ຫຍໍ້ CSS. ໂຄດຖືກຍັບເຂົ້າໃໝ່ດ້ວຍສອງຊ່ອງຕໍ່ລະດັບ, ແລະ ຈຸດຄູ່ຂອງຕົວເລືອກເຊັ່ນ a:hover ຖືກແຍກຈາກຈຸດຄູ່ຂອງຄຸນສົມບັດ. ດາວໂຫຼດ ບັນທຶກເປັນ styles.css.

ຕົວເລກ gzip ຂ້າງການຫຼຸດໝາຍຄວາມວ່າແນວໃດ?

ມັນເປັນການປະມານຂະໜາດຜົນລັບຫຼັງການບີບອັດ gzip, ວັດດ້ວຍ CompressionStream API ຂອງບຣາວເຊີ. ຖ້າບຣາວເຊີຂອງທ່ານບໍ່ມີ API ນັ້ນ, ຂະໜາດ gzip ຈະບໍ່ຖືກສະແດງ.

CSS ຂອງຂ້ອຍຖືກສົ່ງໄປເຊີບເວີເມື່ອຂ້ອຍຫຍໍ້ບໍ?

ບໍ່. ການຫຍໍ້ເຮັດໂດຍຕົວແຍກ token JavaScript ທີ່ແລ່ນໃນບຣາວເຊີຂອງທ່ານ, ບໍ່ມີໄລບຣາຣີພາຍນອກ. ບໍ່ມີຫຍັງຖືກອັບໂຫຼດ, ດັ່ງນັ້ນທ່ານສາມາດໃຊ້ກັບສະໄຕລ໌ຊີດສ່ວນຕົວໄດ້.

ຟຣີແທ້ບໍ?

ແມ່ນແລ້ວ. ທຸກເຄື່ອງມືແມ່ນໃຊ້ຟຣີ, ບໍ່ຕ້ອງມີບັນຊີ ແລະ ບໍ່ຕ້ອງໃຊ້ບັດເຄຣດິດ. ການເຮັດວຽກທັງໝົດແມ່ນດຳເນີນຢູ່ໃນອຸປະກອນຂອງທ່ານແທນທີ່ຈະຢູ່ໃນເຊີບເວີຂອງພວກເຮົາ, ເຊິ່ງເຮັດໃຫ້ເຮົາສາມາດໃຫ້ບໍລິການໄດ້ຟຣີ.

ມັນເຮັດວຽກຢູ່ໃນມືຖືບໍ?

ໄດ້. ມັນເຮັດວຽກໃນບຣາວເຊີມືຖືລຸ້ນໃໝ່ເທິງ iOS ແລະ Android ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງຫຍັງ.

🗜️

ຫຍໍ້ & ຈັດຮູບແບບ CSS ຟຣີ

ຫຍໍ CSS ເພື່ອຫຼຸດຂະໜາດໄຟລ໌ ຫຼື ເຮັດ CSS ທີ່ຖືກຫຍໍໃຫ້ອ່ານໄດ້ງ່າຍ. ທັນທີ, ໃນບຣາວເຊີ.

ເຮັດວຽກໃນບຣາວເຊີບໍ່ຕ້ອງລົງທະບຽນ, ບໍ່ມີໜ້າຕ່າງປັອບອັບບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບຟຣີຕະຫຼອດໄປ

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

ຫຼືລາກໄຟລ໌ .css ມາວາງລຸ່ມນີ້

ລາກໄຟລ໌ .css ມາວາງບ່ອນນີ້ ຫຼືຄລິກເພື່ອເລືອກ

CSS · ປະມວນຜົນຢູ່ໃນອຸປະກອນຂອງທ່ານ

ຫຼືກົດ Ctrl+V ເພື່ອວາງຈາກຄລິບບອດ

ຊອກຫາໄຟລ໌

CSS ນຳເຂົ້າ

CSS ຜົນ

ຜົນຈະປາກົດທີ່ນີ້…

ການນຳໃຊ້ທົ່ວໄປ

Minify CSS ສໍາລັບ Production Deploymentຫຼຸດຂະໜາດ CSS file ກ່ອນ deploy ເປັນ production - ໂຫດໂຫລດຫນ້າ ແລະ bandwidth costs
Beautify Minified CSS ສໍາລັບ Debuggingຮູບແບບ compressed ຫຼື minified CSS ເປັນ readable code ເພື່ອໃຫ້ທ່ານສາມາດກວດ ແລະ debug styles
Minify CSS ສໍາລັບ Email TemplatesCompact CSS ສໍາລັບ HTML email templates ບ່ອນທີ່ຂະໜາດໄຟລ ແລະ inline style bloat matters
Minify CSS ສໍາລັບ WordPress Themesຫຼຸດຂະໜາດ custom WordPress theme stylesheets ສໍາລັບ PageSpeed scores ທີ່ດີກວ່າ
Beautify CSS ສໍາລັບ Code Reviewຮູບແບບ CSS file ໃດກໍ່ຕາມໄປ clean indented readable code ສໍາລັບ review ແລະ collaboration

ມັນເຮັດວຽກແນວໃດ

ເຄື່ອງມືນີ້ໃຊ້ຕົວແບ່ງໂທເຄັນ CSS ທີ່ຂຽນເອງ, ບໍ່ຕ້ອງອາໄສຫຍັງພາຍນອກ ສ້າງທັງໝົດໃນ JavaScript — ບໍ່ມີໄລບຣາຣີພາຍນອກ, ບໍ່ມີການເອີ້ນເຊີບເວີ. ຕົວແບ່ງໂທເຄັນຈັດປະເພດທຸກໂຕອັກສອນເປັນໂຄ້ດ, ຄຳເຫັນ, ສະຕຣິງໃສ່ວົງຢືມ, ຫຼືຄ່າ url() ກ່ອນນຳໃຊ້ການແປງໃດໆ, ເຊິ່ງປ້ອງກັນບໍ່ໃຫ້ກົດຊ່ອງຫວ່າງເຮັດໃຫ້ເນື້ອໃນສະຕຣິງ, data URIs, ຫຼືນິພົນ calc() ເສຍຫາຍ.

1
ຂັ້ນຕອນການແບ່ງໂທເຄັນ
CSS ຂໍ້ມູນເຂົ້າຖືກສະແກນທີລະໂຕອັກສອນ ແລະ ແບ່ງເປັນໂທເຄັນທີ່ພິມແລ້ວ: ສ່ວນໂຄ້ດດິບ, ຄຳເຫັນ /* ... */, ສະຕຣິງໃສ່ວົງຢືມ (ຮັກສາລຳດັບ escape), ແລະ ບລ໋ອກ url(...). ນີ້ຮັບປະກັນວ່າການແປງໃນຂັ້ນຕອນຕໍ່ໄປພຽງແຕ່ແຕະໄວຍາກອນ CSS ຕົວຈິງ — ບໍ່ເຄີຍແຕະເນື້ອໃນຂອງ string literal ຫຼື data URI.
2
ການຫຍໍ້ ຫຼືການເຮັດໃຫ້ສວຍງາມ
ໃນໂໝດຫຍໍ້, ຄຳເຫັນປົກກະຕິຖືກລຶບອອກ (ຄຳເຫັນ /*! license */ ຖືກຮັກສາໄວ້), ການແລ່ນຂອງຊ່ອງຫວ່າງໃນໂທເຄັນໂຄ້ດຫຍໍ້ເປັນຊ່ອງຫວ່າງດຽວ, ແລະ ຊ່ອງຫວ່າງໃກ້ວັກຕອນອ້ອມຮອບ { } : ; , > ~ ຖືກລຶບອອກ. ຊ່ອງຫວ່າງອ້ອມຮອບ + ແລະ - ຖືກປ່ອຍໄວ້ໂດຍຕັ້ງໃຈເພື່ອຫຼີກລ່ຽງການທຳລາຍນິພົນ calc(). ໃນໂໝດເຮັດໃຫ້ສວຍງາມ, ໂຄ້ດຖືກຫຍໍ້ກ່ອນເປັນເສັ້ນຖານທີ່ສະອາດ, ແລ້ວແບ່ງໂທເຄັນ ແລະ ເວັ້ນວັກຄືນໃໝ່ດ້ວຍການຕິດຕາມຄວາມເລິກສອງຊ່ອງຫວ່າງ ແລະ ການກວດຈຸດສອງຈຸດການປະກາດເພື່ອແຍກຈຸດສອງຈຸດ property: value ອອກຈາກຈຸດສອງຈຸດ selector ເຊັ່ນ a:hover.
3
ການປະມານຂະໜາດ Gzip
ຫຼັງຜະລິດຜົນອອກ, CompressionStream API ພື້ນເມືອງຂອງບຣາວເຊີຖືກໃຊ້ເພື່ອບີບອັດຜົນລັບດ້ວຍ gzip ແລະ ວັດຈຳນວນໄບຕ໌ທີ່ໄດ້. ນີ້ໃຫ້ການປະມານຂະໜາດການໂອນທີ່ຕົວຈິງກົງກັບສິ່ງທີ່ເຊີບເວີເວັບທີ່ມີການບີບອັດ gzip ຈະສົ່ງຜ່ານເຄືອຂ່າຍ.
4
ສຳເນົາ ຫຼືດາວໂຫຼດ
CSS ທີ່ປະມວນຜົນແລ້ວຖືກຂຽນໄປຄລິບບອດຜ່ານ Clipboard API, ຫຼືດາວໂຫຼດເປັນ styles.min.css (ໂໝດຫຍໍ້) ຫຼື styles.css (ໂໝດເຮັດໃຫ້ສວຍງາມ) ໂດຍໃຊ້ Blob ພ້ອມປະເພດ MIME text/css. ອັດຕາສ່ວນການຫຼຸດຂະໜາດສະແດງສົດຂະນະທ່ານພິມ.