تفاوت‌های بین CSS2 ،CSS و CSS3

CSS چیست؟

Cascading Style Sheet که معمولاً با نام CSS شناخته می‌شود، لایه طراحی اِلِمان‌های HTML است یا به زبان ساده‌تر با استفاده از آن می‌توان المان‌هایی نظیر فونت، سایز، رنگ و فاصله را در صفحات و محتوای HTML با افزودن کلاس به آن طراحی کرد. 

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

اساساً سه روش برای نوشتن CSS وجود دارد که در زیر آن‌ها را معرفی می‌کنیم.

Internal

به این معنی است که شما کدهای css خودتان را درون دو تگ باز و بسته style و داخل سند html خودتان قرار می‌دهید.

برای مثال:

External

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

• باعث صرفه‌جویی در زمان بارگذاری صفحه می‌شود.
• داشتن همه موارد در یک مکان، راحت‌تر است.

برای مثال:

Inline CSS

استفاده از inline CSS به این معنی است که هر مدلی از محتوا تبدیل به المان‌های HTML می‌شود. از آن برای یک بخش محدود و در مواردی که ملزومات شما بسیار کوچک هستند، به این دلیل که تنها روی یک المان منفرد اثر می‌گذارد، استفاده می‌شود. 

اگر شما یک برنامه‌نویس خوب هستید، پیشنهاد نمی‌کنیم که از inline CSS استفاده کنید چون:

• برای مشخص کردن CSS در هر تگ HTML زمانی صرف می‌شود.
• کد بسیار بزرگ و پیچیده می‌شود.

برای مثال:

عموماً بلاگرها از مدل داخلی استفاده می‌کنند و از مدل خارجی برای Wordpress و از inline CSS در مواردی که نیاز به اصلاحات فوری است، استفاده می‌شود.

ویژگی‌های CSS

پیوستگی

با استفاده از CSS، به‌راحتی می‌توان در صفحات وب تغییر ایجاد کرد. با ایجاد یک تغییر در صفحه مدل CSS، می‌توانید آن را روی هر صفحه‌ای از وب‌سایتتان اعمال کنید.

سازگاری مرورگر

سازگاری مرورگر موضوع بسیار مهمی است و با استفاده از CSS به‌راحتی می‌توان از آن خودداری کرد چون به‌خوبی از پس آن برمی‌آید.

ظاهر

با استفاده از CSS به‌راحتی می‌توان سطح ظاهری وب‌سایت را ارتقا داد چون می‌توان از طیف گسترده‌ای از مدل‌های گویا و وسیع استفاده کرد.

قابلیت پشتیبانی

هرزمان که تغییری در مدل صفحات وب‌سایت شما ایجاد شود، CSS این قابلیت را دارد که به‌صورت خودکار هر صفحه‌ای را از طریق وب‌سایتتان اصلاح کند و یا تغییر دهد.

صرفه‌جویی در زمان

با استفاده از CSS، تنها کافی است یک بار جزئیات مشخصات مدل را برای هر اِلِمان تعیین کنید و پس‌ازآن به‌صورت خودکار این جزئیات را هربار که نیاز باشد به آن المان خاص اعمال می‌کند و همین‌که مجبور به دوباره نوشتن هرچیزی نیستید باعث می‌شود که زمان زیادی ذخیره شود.

تفاوت‌های اساسی بین CSS2 ، CSS و CSS3

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

CSS2 در سال 1998 منتشر شد و مدل‌هایی برای سایر رسانه‌ها به آن اضافه شده بود که باعث می‌شد برای طراحی صفحات مناسب باشد. 

CSS3 در سال 1999 منتشر شد و ویژگی‌های منحصر به فردی به آن اضافه شده که قابلیت نمایش مستندات را ارائه می‌دهد.

2. برخلاف CSS2 که شامل یک مستند منفرد است، CSS3 ویژگی‌هایش را به تعداد زیادی ماژول منفرد تقسیم می‌کند که کار با آن را بسیار آسان می‌کند.

3. با استفاده از CSS3 طراحان می‌توانند از فونت‌های مخصوصی استفاده کنند مثل فونت‌های موجود در Google و Typecast Earlier، با استفاده از CSS و CSS2 طراحان فقط می‌توانند از فونت‌های امن وب استفاده کنند برای اینکه کاملاً مطمئن باشند از فونت‌هایی استفاده می‌کنند که در هر سیستمی، به‌صورت یکسان نشان داده می‌شود.

4. CSS3 مؤلفه‌ها را به‌صورت «دنباله‌ای از انتخاب‌کننده‌های ساده» فراخوانی می‌کند درحالی‌که CSS و CSS2 «انتخاب‌کننده‌های ساده» دارند.

5. CSS3 این قابلیت را دارد که بخش‌های متنی را به چندین ستون مجزا مانند روزنامه تقسیم کند. چون CSS2 مجهز به تقسیم خودکار متن به‌طوری‌که در یک باکس قرار بگیرد، نیست، توسعه‌دهندگان در کار با آن دچار مشکل می‌شدند.

در سال 2020 چه چیزهایی را و در کجا یاد بگیریم؟

CSS یک فناوری توسعه وب است که پشت ظاهر هر صفحه وبی قرار گرفته و ثابت می‌کند که قابلیت انجام کارهای بیشتری با آخرین نسخه‌های تکامل‌یافته‌اش را دارد. نسخه‌های CSS با گذشت زمان روزبه‌روز بهتر شده‌اند که اساساً به این معنی است که یک پلتفرم برنامه‌نویسی ارتقا یافته برای توسعه‌دهندگان است و منجر به طراحی‌های مؤثرتر و سریع‌تر وب می‌شود.

ازآنجایی‌که راه ما در سال 2020 مشخص شده است، مهم‌ترین زبان تصویری وب، CSS3 است و بیشترین تقاضا را هم دارد. این باعث می‌شود که کاربران وب‌سایت شما با بارگذاری سریع صفحات وب از طریق تمام مرورگرها مواجه شوند.

CSS3 به شما امکان کنترل ظاهری وب‌سایتتان را با استفاده از چیدمان، لایه‌بندی، تایپوگرافی و جلوه‌های ویژه می‌دهد. شما به‌راحتی می‌توانید هر تمی برای WordPress انتخاب کنید و یا هر ظاهری برای برنامه یا سایت خودتان در css3 بسازید.

نتیجه‌گیری

CSS3 آخرین نسخه CSS است که تنها با IE9 سازگار است و با هیچ نسخه قدیمی از مرورگرها سازگار نیست. 

هرچه بیشتر کد بنویسید، بیشتر درمورد CSS3 یاد می‌گیرید اما به این نکته باید توجه داشته باشید که بدون شناخت CSS، نمی‌توانید بر CSS3 مسلط شوید. CSS3 همان ویژگی‌های CSS را توسعه داده است و ویژگی‌های جدیدی را برای استفاده راحت‌تر کاربران ارائه داده است. 

CSS3 توانایی پشتیبانی از طراحی‌های رسپانسیو را دارد و می‌تواند media query را کنترل کند درحالی‌که CSS از طراحی رسپانسیو پشتیبانی نمی‌کند و توانایی کنترل media query را ندارد. 

CSS3 برای طراحان وب بسیار مهم است چون طیف گسترده‌ای از گزینه‌ها را ارائه می‌دهد و به ایجاد فرصت‌های پیشرفته‌تر در طراحی صفحات وب کمک می‌کند. ازطریق طراحی وب، بازاریاب‌ها می‌توانند محصول خود را به‌راحتی در بازار معرفی کنند و آگاهی درمورد آن را افزایش دهند.

اگر مایل به یادگیری css هستید می‌توانید دوره‌ی رایگان «آموزش کامل CSS» را در سایت راکت دنبال کنید.

منبع