කියවිය හැකි වන පරිදි සංක්ෂිප්ත CSS සකස් කරන්නේ කෙසේද?

සුවඳ කරන්න තෝරාගෙන ආදාන කොටුවට සංක්ෂිප්ත CSS අලවා, ඉන්ඩෙන්ට් හිස්තැන් 2 හෝ 4 ක් ලෙස තෝරන්න. තෝරක (selectors) සහ ප්රකාශන (declarations) වෙනම පේළිවලට සකසනු ඇත. ඉන්පසු .css ගොනුවක් ලබා ගැනීමට පිටපත් කරන්න හෝ බාගත කරන්න ඔබන්න.

එයට CSS ගුණාංග අකාරාදී ලෙස පෙළගැස්විය හැකිද?

ඔව්. ගුණාංග අකාරාදී ලෙස වර්ග කරන්න ලකුණු කරන්න, එවිට සෑම කොටසකම ඇති ප්රකාශන ගුණාංග නාමය අනුව වර්ග කෙරේ. එය නැවත සකසන්නේ කොටසක් තුළ පමණි, නමුත් පෙර ප්රකාශන අභිබවා යාමට පසුකාලීන ප්රකාශන මත රඳා පවතින්නේ නම් මෙය ප්රතිඵලය වෙනස් කළ හැක.

මෙම මෙවලම සමඟ CSS minify කරන්නේ කෙසේද?

සුවඳ කරන්න වෙනුවට සංක්ෂිප්ත කරන්න තෝරන්න. හිස්තැන් සහ සටහන් (comments) ඉවත් කරනු ලබන අතර, ප්රතිදානය කෙතරම් කුඩාදැයි ප්රමාණ සැසඳීමකින් පෙන්වයි. Download මඟින් එය minified.css ලෙස සුරකියි.

එය @media නීති, nesting සහ url() අගයන් හසුරුවන්නේද?

ඔව්. විශ්ලේෂකය (parser) උද්ධෘත සහ වරහන් හඳුනා ගන්නා බැවින්, url() හෝ strings තුළ ඇති තිත් කොමාවන් හෝ සඟල වරහන් මඟින් ප්රකාශන වෙන් නොවේ. @media, @supports සහ ස්වදේශීය CSS nesting වැනි nested බ්ලොක් ගැඹුරු මට්ටම්වලට ඉන්ඩෙන්ට් කෙරේ.

මගේ stylesheet එක කොහේ හෝ උඩුගත වේද?

නැත. විශ්ලේෂකය පිටුව තුළම ගොඩනගා ඇති අතර ඔබ ටයිප් කරන විට ඔබේ බ්රව්සරයේම CSS සකස් කරයි. කිසිවක් සේවාදායකයකට නොයවන අතර තෙවන පාර්ශවීය හැඩසැගවීම් පුස්තකාල භාවිත නොවේ.

මෙය සැබැවින්ම නොමිලේද?

ඔව්. සෑම මෙවලමක්ම ගිණුමක් හෝ ක්රෙඩිට් කාඩ්පතක් නොමැතිව නොමිලේ භාවිත කළ හැක. ක්රියාවලිය අපගේ සේවාදායක වෙනුවට ඔබගේම උපාංගය මත ක්රියාත්මක වන අතර, මෙය නොමිලේ පවත්වාගෙන යාමට හැකි වන්නේ එබැවිනි.

ජංගම දුරකථනයේ ක්රියා කරයිද?

ඔව්. එය iOS සහ Android හි වත්මන් ජංගම බ්රවුසරවල ක්රියා කරයි, කිසිවක් ස්ථාපනය කිරීම අවශ්ය නැත.

🎨

නොමිලේ CSS සැලසුම්කාරකය

මිනිමයිස් කළ CSS ස්ථාවර ඉන්ඩෙන්ටේෂන් සහිතව පිළිවෙළට සකසන්න, නැතහොත් එය මිනිමයිස් කරන්න. පුරෝකථනය කළ හැකි වෙනස්කම් සඳහා විකල්ප අක්ෂර ක්‍රමයට ගුණාංග වර්ග කිරීම.

ඔබේ බ්‍රවුසරයේ ක්‍රියා කරයිලියාපදිංචි වීමක් නැත, පොප්-අප් නැතලොගිනය අවශ්‍ය නැතසදාකාලිකව නොමිලේ

load වූ පසු offline ක්‍රියා කරයි

ඉන්ඩෙන්ට්:

ගුණාංග අකාරාදී ලෙස වර්ග කරන්න

ගොනුවක් මෙතැනට දමන්න, නැතහොත් පිරික්සීමට ක්ලික් කරන්න

CSS · ඔබගේ උපාංගය තුළම සකසනු ලැබේ

හෝ පසුරු පුවරුවෙන් අලවීමට Ctrl+V ඔබන්න

ගොනු බ්‍රවුස් කරන්න

මිනිෆයිඩ් / අකාරාදී CSS

සුන්දර CSS

ප්‍රතිදානය මෙහි දිස්වේ…

පොදු භාවිත

නිකුතු CSS අනුගමනය කරන්නනිකුතු සිටුවුම බිම minified CSS දෙකෙහි පිටපතට පිටපතට ඉතිරි බිම තිරසර.
කණ්ඩායම CSS ශීර්ෂ බිමකණ්ඩායම-ගිණුම CSS බිම සුසම සුන්දර-කරණ දසඩුවු ගිණුම පිටපතට කන්ටෙන්ට්, ඉතිරි අපි.
Vendor-Prefixed CSS සංයුති කරන්නවිකල්ප-පූර්ණ CSS (autoprefixer ඉතිරි) බොහෝ times ඉඩම් -webkit-, -moz-, -ms- විකල්ප. පිටුවල අනුමත කිරීම සඳහා ඉතිරි කරන්න.
Pro CSS බිම ඉතිරි කරන්නකීර්තිමත නරඩුවි පද්ධති බිම CSS ඉතිරි කරමින් තිරසර ඉතිරි ඉතිරි.
බිම වාර්තා සඳහා CSS ඉතිරි කරන්නCSS බිම ගිණුම කිරීම, ඉතිරි CSS සමීක්ෂකවරුන් සඳහා පිටපතට බිම සිතුවිල්ල.

එය ක්‍රියා කරන්නේ කෙසේද

මෙම මෙවලම කෙලින්ම පිටුවට ගොඩනගා ඇති අතින් ලියන ලද recursive parser එකක් භාවිතයෙන් CSS format කරයි — third-party පුස්තකාලයක්, සර්වර ඇමතුමක් නැත. parser එක සරල regex-පදනම් approaches ව්‍යාකූල කරන quoted strings, url() අගයන්, nested at-rules, සහ comments නිවැරදිව හසුරුවමින් ඔබේ CSS එක character character ලෙස ගමන් කරයි.

1
අක්ෂර-මට්ටමේ ටෝකනීකරණය
walkCss ශ්‍රිතය quote state සහ parenthesis depth track කරමින් රෝ ආදානය එක් අවස්ථාවක එක් character එකක් scan කරයි, එබැවින් url(), string අගයන්, හෝ comments තුළ semicolons හෝ braces කිසි විටෙක ව්‍යුහාත්මක delimiters ලෙස වැරදි ලෙස හඳුනා නොගැනේ.
2
Block සහ declaration වෙන් කිරීම
scanner එක top-level opening brace එකක් සොයාගත් විට, එය prelude එක (selector එක හෝ at-rule keyword එක) extract කර block body එක recursively process කරයි — එහිම වඩාත් ගැඹුරු recursion depth එකකින් handle කරන nested rules (@media, @supports, native CSS nesting) තිබිය හැක.
3
Property sorting සහ indentation
සෑම block එකක් තුළම declarations run එකකට එකතු කර, තෝරාගත් indent පළල (space 2 හෝ 4) සමඟ ලියා දැමීමට පෙර විකල්පව property නාමය අනුව අකාරාදී පිළිවෙළින් sort කෙරේ. Minify ප්‍රකාරය whitespace සම්පූර්ණයෙන්ම මඟහරින අතර comments ඉවත් කරයි.
4
ක්ෂණික in-browser ප්‍රතිදානය
useMemo hook එකක් හරහා ඔබ ටයිප් කරන විටම ප්‍රතිඵල දිස්වේ — කිසිවක් කොහේවත් යවනු නොලැබේ. format කළ හෝ minify කළ CSS clipboard වෙත පිටපත් කළ හැක හෝ .css ගොනුවක් ලෙස බාගත කළ හැක, panel එක මුල් ප්‍රමාණයට සාපේක්ෂව ප්‍රමාණ වෙනස පෙන්වයි.