زبان پیشرفته CSS

گروه‌بندی انتخابگرها

می‌توانید انتخابگرها را گروه‌بندی کنید، به این ترتیب، انتخابگرهای گروه‌بندی شده می‌توانند اعلام مشترک داشته باشند. انتخابگرهای مورد نظر را با کاما از هم جدا کنید. در مثال زیر، همه عناصر عنوان را گروه‌بندی کرده‌ایم. همه عناصر عنوان سبز هستند.

h1،h2،h3،h4،h5،h6 {
  رنگ: سبز;
  }

میراث و مشکلات آن

بر اساس CSS، عناصر فرزند ویژگی‌ها را از عنصر پدر می‌گیرند. اما همیشه به این روش عمل نمی‌کند. به این قانون نگاه کنید:

body {
     font-family: Verdana, sans-serif;
     }

بر اساس این قانون، عنصر body وب‌سایت با فونت Verdana استفاده خواهد کرد (اگر سیستم بازدیدکننده این فونت را داشته باشد).

با استفاده از میراث CSS، عناصر فرزند ویژگی‌هایی را از عناصر بالاتر (در این مثال body) می‌گیرند (این عناصر شامل p، td، ul، ol، ul، li، dl، dt و dd هستند). نیازی به قوانین اضافی نیست، همه فرزندان body باید فونت Verdana را نمایش دهند، و فرزندان فرزندان نیز باید چنین باشند. و در بیشتر مرورگرهای مدرن، اینگونه است.

اما در اوج جنگ مرورگرها، این ممکن نبود، زیرا در آن زمان پشتیبانی از استانداردها انتخاب اولیه شرکت‌ها نبود. به عنوان مثال، Netscape 4 از میراث پشتیبانی نمی‌کند، نه تنها میراث را نادیده می‌گیرد، بلکه قوانینی که برای عناصر body اعمال می‌شود را نیز نادیده می‌گیرد. IE/Windows تا IE6 همچنان مشکلاتی داشت، جایی که سبک فونت در جدول نادیده گرفته می‌شد. ما چگونه باید پیش برویم؟

با مهربانی به Netscape 4 رفتار کنید

بخوبی، شما می‌توانید با استفاده از قانون اضافی که ما آن را "Be Kind to Netscape 4" می‌نامیم، مشکلاتی که مرورگرهای قدیمی نمی‌توانند میراث را درک کنند را حل کنید.

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

نسخه 4.0 مرورگرها نمی‌توانند ارث را درک کنند، اما می‌توانند انتخابگرهای گروهی را درک کنند. این کار ممکن است مقداری از باندwidth کاربران را هدر دهد، اما اگر باید از کاربران Netscape 4 پشتیبانی کنید، باید این کار را انجام دهید.

آیا ارث یک لعنت است؟

اگر نمی‌خواهید که فونت "Verdana, sans-serif" توسط همه فرزندان ارث ببرد، چه کار باید بکنید؟ مثلاً شما می‌خواهید که فونت پاراگراف‌ها Times باشد. هیچ مشکلی نیست. یک قاعده خاص برای p ایجاد کنید، تا از قوانین والد خود خلاص شود:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }