مقدمه

CSS در سال 1994 در کنفرانسی در شیکاگو معرفی شد اما انتشار اولین نسخه‌ی رسمی آن، دو سال بعد یعنی سال 1996 رخ داد. انتشار CSS موجب پایان آشفتگی‌هایی شد که به واسطه‌ی عدول HTML از وظیفه‌ی اصلی خود و دخالت در امور مربوط به ظاهر صفحات وب، به وجود آمده بود. از زمان انتشار اولین نسخه از استاندارد CSS تا امروز، تغییرات زیادی در این استاندارد چه به لحاظ محتوایی و چه به لحاظ شیوه‌ی ارائه‌ی ویژگی‌ها و قابلیت‌های این استاندارد، ایجاد شده و مستندات آن هر روز کامل‌تر و حجیم‌تر شده است. در این درس، قصد داریم کمی در مورد این روند تکاملی و بهبودهای ایجاد شده در CSS صحبت کنیم و مرور کوتاهی بر تاریخچه‌ی این زبان داشته باشیم.

دنیای قبل و بعد از CSS

زبان HTML با هدف ایجاد ساختار و توصیف محتوای صفحات وب معرفی شد و قرار نبود نقشی در تعیین ظاهر صفحات وب داشته باشد؛ اما در HTML3.2 عناصری (elements) مانند font و صفت‌هایی (attributes) مانند color و size معرفی شدند که امکاناتی را برای تعیین استایل و ظاهر عناصر وب ارائه می‌دادند:

<font face="blue" size="12">
  Hello World!
</font>

علاوه بر این، عناصر یا تگ‌هایی مانند center در ارتباط با طرح‌بندی (layout) صفحه معرفی شدند که امکانات پایه‌ای را برای کنترل چیدمان عناصر صفحه در اختیار طراحان و توسعه‌دهندگان وب قرار می‌دادند. البته برای طرح‌بندی‌های پیچیده‌تر، عملاً تنها راه، توسل به جداول HTML بود که اساساً برای این کار خلق نشده بودند. یکی از مهمترین معایب طرح‌بندی صفحه با استفاده از جداول این بود که پیمایش در صفحه را برای کاربرانِ ابزارهایی مانند صفحه‌خوان‌ها (screen readers) دشوار می‌کرد.

به هر حال، این رویکرد، یعنی امکان کنترل ظاهر عناصر از طریق تگ‌ها و صفت‌های HTML، ابهامات و مشکلات زیادی به همراه داشت و باعث ترکیب کدهای ساختاری (structural) و معنایی (semantic) با کدهای مربوط به ظاهر صفحه (presentation) شده بود و این به معنای مشکل‌شدن فرایند توسعه و نگهداری وبسایت‌ها بود. به علاوه، در این رویکرد، تعیین مواردی مانند رنگ و فونت و سایز عناصر باید برای همه‌ی صفحات یک وبسایت به طور جداگانه انجام می‌شد که کاری پرمشقت و خسته‌کننده بود.

به طور خلاصه می‌توان گفت که تا قبل از معرفی CSS، برخی عناصر و صفت‌های HTML مانند عنصر font و صفت color با هدف استایل‌دهی مورد استفاده قرار می‌گرفتند و این با فلسفه‌ی HTML یعنی ایجاد ساختار و محتوای اسناد وب، منافات داشت و با تلفیق دو فرایند ایجاد ساختار و تعیین ظاهر صفحات با یکدیگر، کار طراحی وب و نگهداری ویسایت‌ها را به کاری پیچیده و پر زحمت تبدیل کرده بود.

کنسرسیوم جهانی وب یا W3C به منظور حل این مشکلات و جداسازی فرایند ایجاد ساختار و محتوا از فرایند تعیین ظاهر صفحات وب، در سال 1996 اولین نسخه از زبان CSS را که برای اولین بار در سال 1994 در کنفرانسی در شیکاگو معرفی شده بود، به طور رسمی منتشر کرد. با معرفی CSS به عنوان زبان رسمی استایل‌دهی صفحات وب، کار ایجاد محتوا از کار تعیین ظاهر صفحه جدا شد و مشکلات زیادی از مقابل پای برنامه‌نویسان و طراحان وب برداشته شد. به این ترتیب، آنها از مزیتی با نام جداسازی لایه‌ها (Separation Of Concerns) که به اختصار SoC خوانده می‌شود، برخوردار شدند. SoC مفهومی کلیدی در برنامه‌نویسی محسوب می‌شود و در اینجا به معنای جدا شدن لایه‌ی ساختار و محتوا (HTML) از لایه‌ی ظاهر و استایل (CSS) است.

جداسازی لایه‌ها یا SoC

در عبارت Separation of Concerns منظور از Concerns جنبه‌های عملکردی مختلفی است که یک سیستم نرم‌افزاری ارائه می‌دهد. SoC یک اصل طراحی (design principle) است که با اِفراز (partitioning) یک سیستم نرم‌افزاری به بخش‌های مختلف، به طوری که هر بخش مسئولیت مشخصی داشته باشد، به دنبال مدیریت و کنترل پیچیدگی‌های سیستم و حداقل کردن امکان تداخل مسئولیت‌ها با یکدیگر است. نتیجه‌ی پیروی از این اصل، تجزیه‌ی مسائل بزرگتر به مسائل کوچک‌تری است که ایزوله هستند و مدیریت آنها ساده‌تر است. پس، SoC یک اصل طراحی است که به دنبال کاهش پیچیدگی‌های سیستم‌های نرم‌افزاری و تولید نرم‌افزارهای باکیفیت‌تر است. در مورد پلتفرم وب، پیاده‌سازی SoC به این معناست که مارکاپ یا ایجاد صفحات وب در یک لایه و استایل‌دهی صفحات در یک لایه‌ی دیگر انجام شود.

نسخه‌ها و ماژول‌های CSS

هر استاندارد وب مانند HTML، CSS و JavaScript دارای مستندات یا مشخصات فنی (specifications) است که به اختصار،specs نامیده می‌شود. این اسناد توسط سازمان‌هایی نظیر W3C، WHATWG و ECMA نگهداری و به‌روزرسانی می‌شوند. نگهداری و توسعه‌ی مستندات مربوط به استاندارد CSS بر عهده‌ی کنسرسیوم جهانی وب یا همان W3C است. گروهی با نام CSS Working Group در این سازمان وجود دارد که نمایندگانی از شرکت‌های سازنده‌ی مرورگرهای وب و نمایندگان مستقلی از جامعه‌ی توسعه‌دهندگان و برنامه‌نویسان در آن عضو هستند و به کار تدوین مستندات CSS مشغول هستند.

اولین نسخه‌ی رسمی از CSS یعنی CSS1 شامل ویژگی‌ها و امکاناتی برای تنظیم مواردی مانند فونت، سایز و رنگ متون، رنگ پس‌زمینه‌ی عناصر و ویژگی‌هایی از این دست بود. سال 1998 نسخه‌ی استاندارد بعدی یعنی CSS2 و بلافاصله بعد از آن، نسخه‌ی CSS2.1 معرفی شد که امکانات بیشتری داشت و مواردی مانند امکان تنظیم موقعیت مکانی عناصر در صفحه نیز به آن اضافه شده بود.

در آن زمان، توسعه‌ی بخش‌های مختلف استاندارد CSS به صورت همزمان انجام می‌شد و لذا نسخه‌بندی مستندات CSS در قالب نسخه‌های جامع نظیر CSS1، CSS2.1 و CSS3 انجام می‌شد. اما از زمان انتشار CSS3 حجم مستندات این استاندارد به طور قابل ملاحظه‌ای افزایش پیدا کرد و روند توسعه در بخش‌های مختلف به قدری متفاوت شد که تصمیم گرفتند مستندات CSS را به چند بخش یا ماژول تقسیم کنند و هر ماژول را به طور جداگانه توسعه دهند و بنابراین، نسخه‌بندی جامع CSS جای خود را به سطح‌بندی ماژول‌های CSS داد.

در حال حاضر (اواخر سال 2023) بیش از 50 ماژول مختلف وجود دارد که هر یک شامل ویژگی‌ها و امکانات مربوط به یک موضوع مشخص است. در حقیقت، توسعه‌ی CSS در ماژول‌های جداگانه و به صورت بی‌وقفه انجام می‌شود و اینطور نیست که ویژگی‌های یک نسخه‌‌ی جدید، طراحی شده و سپس، به یکباره در قالب یک نسخه‌ی جدید از همه‌ی آنها رونمایی شود؛ بلکه هر ماژول به صورت جداگانه توسعه داده می‌شود و هر وقت سطح جدیدی از یک ماژول آماده‌ی انتشار شود، مستقل از سایر ماژول‌ها منتشر می‌شود.

به این ترتیب، وقتی سطح جدیدی از یک ماژول ارائه می‌شود، مرورگرها شروع به پیاده‌سازی و پشتیبانی از آن می‌کنند. برای نمونه، ماژولی مانند CSS Selectors در سطح 4 و ماژول جدیدتری مثل CSS Grids در سطح 1 قرار دارند. هر مرورگر، سطح مشخصی از هر یک از ماژول‌ها را پشتیبانی می‌کند. در ضمن، وقتی بنا باشد ویژگی جدیدی به CSS اضافه شود، چنانچه ماژولی مرتبط با آن ویژگی وجود داشته باشد، ویژگی مورد نظر به آن ماژول افزوده می‌شود و در غیر این صورت، یک ماژول جدید ایجاد می‌شود.

توسعه‌ی CSS به عنوان یک Living Standard

با توجه به آنچه در مورد روند توسعه‌ی استاندارد CSS گفته شد، CSS یک living standard محسوب می‌شود و W3C برای ارائه‌ی یک تصویر کلی از وضعیت این استاندارد، به طور دوره‌ای اقدام به تهیه‌ی یک تصویر لحظه‌ای (snapshot) از مستندات این زبان می‌کند. البته یک اسنپ‌شات از مستندات CSS شامل ماژول‌هایی است که از نظر پایداری (stability) در وضعیت خوبی قرار دارند و مخاطبان اصلی این اسنپ‌شات‌ها، پیاده‌سازی‌کنندگان (CSS implementers) مثل سازندگان مرورگرها هستند نه برنامه‌نویسان و توسعه‌دهندگان (CSS authors).

نکاتی در مورد اسناد Specs

در مورد نگهداری و توسعه‌ی اسناد specs برای تکنولوژی‌های مختلف و به‌ویژه CSS، چند نکته‌ی قابل توجه وجود دارد:

  • نکته‌ی اول اینکه اسناد specs بسیار حجیم بوده و برای اهداف آموزشی مناسب نیستند. در حقیقت، مخاطبان این اسناد، توسعه‌دهندگان و برنامه‌نویسان وب نیستند؛ بلکه متخصصانی مانند سازندگان مرورگرها هستند که باید ویژگی‌های ارائه‌شده در اسناد را پیاده‌سازی کنند.
  • نکته‌ی دوم اینکه اگرچه W3C متولی استاندارد CSS محسوب می‌شود و کار انتشار مستندات آن را انجام می‌دهد اما ویژگی‌های ارائه‌شده توسط این سازمان، زمانی قابلیت استفاده پیدا می‌کنند که توسط مرورگرها پیاده‌سازی شوند. البته اینکه مرورگرها در کارگروه CSS نماینده دارند و در تدوین ویژگی‌های جدید مشارکت دارند، تا حد زیادی باعث می‌شود که مشکلی در این ارتباط به وجود نیاید و مرورگرها سعی کنند هر چه سریع‌تر، ویژگی‌های جدید را پیاده‌سازی کنند.
  • و نکته‌ی آخر اینکه فرایند توسعه‌ی مستندات CSS به نحوی است که سازگاری با نسخه‌های قبلی (backward compatibility) حفظ می‌شود. به همین دلیل است که سایت یا صفحه‌ی وبی که با استانداردهای دو دهه پیش استایل‌دهی شده، همچنان بدون مشکل توسط مرورگرها نمایش داده می‌شود.