منسق أكواد CSS

طريقة الاستخدام

1. أدخل كود CSS والإزاحة.
2. تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
3. انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.

طريقة الحساب

تُحمى النصوص والتعليقات أولا، ثم يُكتب سطر جديد بعد { وبعد كل ; مع زيادة الإزاحة داخل كل كتلة، وتوضع } في سطر مستقل، وتُفصل المحددات بعد الفاصلة، وتُضاف ; الناقصة قبل }.

مثال

المدخلات: الإزاحة = مسافتان. النتيجة: CSS المنسق: .btn { color: #fff; padding: 8px 16px; } .btn:hover, .btn:focus { opacity: .9; } @media (max-width:600px) { .btn { width: ⁦100%⁩; } }، عدد الأسطر: 15.

.btn{color:#fff;padding:8px 16px}.btn:hover,.btn:focus{opacity:.9}@media (max-width:600px){.btn{width:⁦100%⁩}}

.btn {
  color: #fff;
  padding: 8px 16px;
}

.btn:hover,
.btn:focus {
  opacity: .9;
}

@media (max-width:600px) {
  .btn {
    width: ⁦100%⁩;
  }
}

الحدود والملاحظات

• لا يعيد ترتيب الخصائص ولا يحذف المكرر منها.
• يحافظ على كتابة المحددات كما هي، فلا يضيف مسافات حول > أو +.