ຂ້ອຍຈະຈັດຮູບແບບ CSS ທີ່ຖືກຫຍໍ້ໃຫ້ອ່ານງ່າຍໄດ້ແນວໃດ?

ວາງ CSS ທີ່ຖືກຫຍໍ້ລົງໃນກ່ອງປ້ອນຂໍ້ມູນໂດຍເລືອກ ຈັດຮູບແບບ ໄວ້ ແລະ ເລືອກ ຈັດຫຍໍ້ ເປັນ 2 ຫຼື 4 ຊ່ອງ. ຕົວເລືອກ ແລະ ຄຳປະກາດຈະຖືກແຍກເປັນແຕ່ລະແຖວ. ຈາກນັ້ນກົດ ສຳເນົາ ຫຼື ດາວໂຫຼດ ເພື່ອຮັບໄຟລ໌ .css.

ມັນສາມາດຈັດຮຽງຄຸນສົມບັດ CSS ຕາມລຳດັບຕົວອັກສອນໄດ້ບໍ່?

ໄດ້. ໝາຍຕິກ ຈັດຄຸນສົມບັດຕາມຕົວອັກຂອນ ແລ້ວຄຳປະກາດໃນແຕ່ລະບລັອກຈະຖືກຈັດຮຽງຕາມຊື່ຄຸນສົມບັດ. ມັນຈະຈັດລຳດັບໃໝ່ສະເພາະພາຍໃນບລັອກເທົ່ານັ້ນ, ເຊິ່ງອາດປ່ຽນຜົນໄດ້ຮັບຖ້າທ່ານອາໄສຄຳປະກາດດ້ານລຸ່ມເພື່ອຂຽນທັບອັນກ່ອນໜ້າ.

ຂ້ອຍຈະຫຍໍ້ CSS ດ້ວຍເຄື່ອງມືນີ້ໄດ້ແນວໃດ?

ເລືອກ ຫຍໍ້ ແທນ ຈັດຮູບແບບ. ຊ່ອງຫວ່າງ ແລະ ຄຳເຫັນຈະຖືກລຶບອອກ, ແລະ ການປຽບທຽບຂະໜາດຈະສະແດງໃຫ້ເຫັນວ່າຜົນໄດ້ຮັບນ້ອຍລົງຫຼາຍປານໃດ. ການດາວໂຫຼດຈະບັນທຶກເປັນ minified.css.

ມັນຮອງຮັບກົດ @media, ການຊ້ອນກັນ ແລະ ຄ່າ url() ບໍ່?

ຮອງຮັບ. ຕົວວິເຄາະຈະຕິດຕາມເຄື່ອງໝາຍວົງຢືມ ແລະ ວົງເລັບ, ດັ່ງນັ້ນຈຸດຈຸດຈຸດພາກ (;) ຫຼື ວົງເລັບປີກກາພາຍໃນ url() ຫຼື ຂໍ້ຄວາມຈະບໍ່ແຍກຄຳປະກາດອອກຈາກກັນ. ບລັອກທີ່ຊ້ອນກັນເຊັ່ນ @media, @supports ແລະ ການຊ້ອນ CSS ແບບດັ້ງເດີມຈະຖືກຫຍໍ້ໜ້າໃນລະດັບທີ່ເລິກລົງໄປ.

stylesheet ຂອງຂ້ອຍຖືກອັບໂຫຼດໄປບ່ອນໃດບ່ອນໜຶ່ງບໍ່?

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

ຟຣີແທ້ບໍ?

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

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

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

🎨

ຈັດຮູບແບບ CSS ຟຣີ

ຈັດຮູບແບບ CSS ທີ່ຖືກບີບອັດໃຫ້ມີການຍ່ອໜ້າສະໝ່ຳສະເໝີ ຫຼື ບີບອັດ CSS. ມີຕົວເລືອກຈັດລຽງຄຸນສົມບັດຕາມຕົວອັກສອນ ເພື່ອປຽບທຽບຄວາມແຕກຕ່າງໄດ້ງ່າຍ.

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

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

ຈັດຫຍໍ້:

ຈັດຄຸນສົມບັດຕາມຕົວອັກຂອນ

ວາງໄຟລ໌ບ່ອນນີ້, ຫຼື ກົດເພື່ອເລືອກ

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

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

ຊອກຫາໄຟລ໌

CSS ຫຍໍ້ / ກະຈັດກະຈາຍ

CSS ທີ່ຈັດຮູບແບບແລ້ວ

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

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

ແກ້ໄຂ Production CSSເບິ່ງ minified CSS ຈາກສະຖານທີ່ຜະລິດໄປໃນຮູບແບບທີ່ອ່ານໄດ້ເພື່ອຊອກ ແລະ ວາງກະລື່ນກົງກັນຂ້າມກັບໄລຍະ.
ບັງຄັບໃຊ້ CSS ແບບກຸ່ມດໍາເນີນການ CSS ສະ ໝ ຸດ ຕົ້ນຂໍ້ຜ່ານ beautifier ສະ ໝໍ່າ ສະ ໝໍ່າ ດັ່ງ ນັ້ນ diffs ແມ່ນກ່ຽວກັບເນື້ອຫາ ບໍ່ ຕົ້ນພະສາວ.
ຟໍາແມັດ Vendor-Prefixed CSSVendor-prefixed CSS (autoprefixer ລະ) ມັກເຮັດໃຫ້ເກີດເຫຼຼກຫຼາຍ -webkit-, -moz-, -ms- ຕົວ. ຟໍາແມັດຕົວກວດສອບ.
ຮຽນຮູ້ຈາກ Pro CSSວົງຂອບ CSS ຈາກລະບົບອອກແບບທີ່ຊື່ສຽງດັງຜ່ານການຟໍາແມັດເລີ່ມຕົ້ນທີ່ຮວມລວມຂອງພວກເຂົາ.
ຟໍາແມັດ CSS ສໍາລັບລາຍງານ Bugເມື່ອໄຟລ CSS bugs, ຟໍາແມັດ CSS ງ່າຍຫຼາຍສໍາລັບຕົວກວດສອບການອ່ານ ແລະເຂົ້າໃຈ.

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

ເຄື່ອງມືນີ້ຈັດຮູບແບບ CSS ໂດຍໃຊ້ຕົວແຍກແບບ recursive ທີ່ຂຽນເອງສ້າງໂດຍກົງເຂົ້າໃນໜ້າ — ບໍ່ມີໄລບຣາຣີພາກສ່ວນທີສາມ, ບໍ່ມີການເອີ້ນເຊີບເວີ. ຕົວແຍກຍ່າງຜ່ານ CSS ຂອງທ່ານທີລະໂຕອັກສອນ, ຈັດການສະຕຣິງທີ່ໃສ່ວົງຢືມ, ຄ່າ url(), at-rules ຊ້ອນກັນ, ແລະ ຄຳເຫັນທີ່ອາດເຮັດໃຫ້ວິທີການອີງ regex ງ່າຍໆ ສັບສົນຢ່າງຖືກຕ້ອງ.

1
ການແບ່ງໂທເຄັນລະດັບໂຕອັກສອນ
ຟັງຊັນ walkCss ສະແກນຂໍ້ມູນເຂົ້າດິບທີລະໂຕອັກສອນ, ຕິດຕາມສະຖານະວົງຢືມ ແລະ ຄວາມເລິກວົງເລັບເພື່ອວ່າຈຸດຈຸລະພາກ ຫຼືວົງຢືມພາຍໃນ url(), ຄ່າສະຕຣິງ, ຫຼືຄຳເຫັນ ບໍ່ເຄີຍຖືກເຂົ້າໃຈຜິດວ່າເປັນຕົວແບ່ງໂຄງສ້າງ.
2
ການແຍກບລ໋ອກ ແລະ ການປະກາດ
ເມື່ອຕົວສະແກນພົບວົງເລັບເປີດລະດັບເທິງ, ມັນດຶງ prelude (selector ຫຼືຄຳສຳຄັນ at-rule) ແລະ ປະມວນຜົນເນື້ອໃນບລ໋ອກແບບ recursive — ເຊິ່ງອາດມີກົດຊ້ອນກັນ (@media, @supports, CSS nesting ພື້ນເມືອງ) ຈັດການທີ່ຄວາມເລິກ recursion ເລິກກວ່າ.
3
ການຮຽງລຳດັບຄຸນສົມບັດ ແລະ ການເວັ້ນວັກ
ການປະກາດພາຍໃນແຕ່ລະບລ໋ອກຖືກເກັບເປັນຊຸດ, ແລ້ວທາງເລືອກຮຽງລຳດັບຕົວອັກສອນຕາມຊື່ຄຸນສົມບັດກ່ອນຖືກຂຽນອອກດ້ວຍຄວາມກວ້າງເວັ້ນວັກທີ່ເລືອກ (2 ຫຼື 4 ຊ່ອງຫວ່າງ). ໂໝດຫຍໍ້ຂ້າມຊ່ອງຫວ່າງທັງໝົດ ແລະ ຕັດຄຳເຫັນອອກ.
4
ຜົນອອກໃນບຣາວເຊີທັນທີ
ຜົນລັບປາກົດຂະນະທ່ານພິມຜ່ານ useMemo hook — ບໍ່ມີຫຍັງຖືກສົ່ງໄປໃສ. CSS ທີ່ຈັດຮູບແບບ ຫຼືຫຍໍ້ແລ້ວສາມາດສຳເນົາໄປຄລິບບອດ ຫຼືດາວໂຫຼດເປັນໄຟລ໌ .css, ແລະ ແຜງສະແດງຄວາມແຕກຕ່າງຂະໜາດທຽບກັບຕົ້ນສະບັບ.