تفاوت بین CSS2 و CSS3

درک تغییرات عمده در CSS3

بزرگترین تفاوت بین CSS2 و CSS3 این است که CSS3 به بخش های مختلفی به نام ماژول ها تقسیم شده است. هر یک از این ماژول ها از طریق W3C در مراحل مختلف فرآیند توصیه می شود. این فرآیند باعث شده است که بسیاری از قطعات CSS3 در مرورگر توسط سازندگان مختلف پذیرفته شده و اجرا شوند.

اگر این روند را با آنچه که با CSS2 اتفاق افتاده مقایسه کنید، جایی که همه چیز به عنوان یک سند با تمام اطلاعات Cascading Style Sheets درون آن ارائه شده است، مزایای شکستن توصیه ها را به قطعات کوچکتر و جداگانه نشان می دهد. از آنجا که هر یک از ماژول ها به صورت جداگانه کار می کنند، ما گستره وسیعی از پشتیبانی مرورگر برای ماژول های CSS3 را داریم.

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

جدید CSS3 انتخابگرها

CSS3 مجموعه ای از راه های جدیدی را که می توانید قوانین CSS را با انتخابگرهای CSS جدید، و همچنین ترکیب ترکیبی جدید و برخی از عناصر جدید بنویسید، ارائه می دهد.

سه متغیر ویژگی جدید:

• آغازگر مشخصه دقیقا همانند عنصر [foo ^ = "bar"] است. عنصر دارای یک مشخصه به نام foo است که از "bar" شروع می شود.
• پایان دادن به عنصر دقیقا با عنصر [foo $ = "bar"] منطبق است. عنصر دارای صفتی به نام foo است که با "bar" به پایان می رسد
• مشخصه شامل عنصر match [foo * = "bar"] عنصر دارای یک مشخصه به نام foo است که حاوی رشته "bar" است مثلا

16 شبه کلاس جدید:

• : ریشه
  • عنصر ریشه سند. در HTML همیشه این است.
• : n-child (n)
  • از این برای مطابقت با عناصر دقیق کودک استفاده کنید یا از متغیرها برای دریافت مسابقات متناوب استفاده کنید.
• : nth-last child (n)
  • عنصر عناصر کودک را با توجه به آخرین عدد شمارش کنید.
• : nth-of-type (n)
  • عناصر خواهر و برادر را با همین نام قبل از آن در درخت سند قرار دهید.
• : n-last-of-type (n)
  • عناصر خواهر و برادر را با همین نام شمارش کنید از پایین.
• :آخرین فرزند
  • آخرین عنصر فرزند پدر و مادر را با هم مقایسه کنید.
• : اولین نوع
  • اولین عنصر خواهر و برادر از آن نوع را با هم مقایسه کنید.
• : آخرین نوع
  • آخرین عنصر خواهر و برادر از آن نوع را مطابقت دهید.
• : تنها فرزند
  • عنصری را که تنها فرزند پدر و مادرش است، مطابقت دهید.
• : فقط نوع
  • عنصر را تنها یکی از نوع آن مطابقت می دهد.
• :خالی
  • عنصری را که فرزند ندارند (از جمله گره های متن) مطابقت دهید.
• :هدف
  • یک عنصر را که هدف از URI ارجاعی است، مطابقت دهید.
• : فعال
  • عنصر را هنگامی که فعال است، مطابقت دهید.
• :معلول
  • عنصر را هنگامی که غیرفعال است، مطابقت دهید.
• : چک شده
  • عنصر را هنگامی که آن را چک کرده اید مطابقت دهید (دکمه رادیو یا جعبه ثابت).

• : نه (ها)
  • زمانیکه عنصر با انتخاب های ساده مطابقت نداشته باشد، مطابقت دارد.

یک ترکیبی جدید:

• elementA ~ elementB
  • زمانی که elementB زیر جایی بعد از elementA دنبال می شود، لزوما بلافاصله پس از آن مطابقت ندارد.

خواص جدید

CSS3 همچنین تعدادی از خواص جدید CSS را معرفی کرد. بسیاری از این ویژگی ها ایجاد سبک های بصری بود که احتمالا با یک برنامه گرافیکی مانند فتوشاپ بیشتر ارتباط برقرار می کرد. بعضی از اینها، مانند شعاع مرز یا جعبه سایه، از زمانی که مقدمه ای روی CSS3 بودند، دور از دسترس هستند. دیگران، مانند flexbox و حتی CSS Grid، سبک های جدیدتر هستند که هنوز هم اغلب به عنوان افزودنی های CSS3 در نظر گرفته می شوند.

در CSS3، مدل جعبه تغییر نکرده است. اما تعدادی از ویژگی های جدید سبک وجود دارد که می تواند به شما کمک کند پس زمینه و مرزهای جعبه های خود را سبک کنید.

منوی چندگانه Mages

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

خواص سبک جدید پس زمینه

همچنین برخی از خواص پس زمینه جدید در CSS3 وجود دارد.

• پس زمینه کلیپ
  • این ویژگی نحوه تصویر پسزمینه را تعریف می کند. به طور پیش فرض جعبه مرزی است، اما می توان آن را به جعبه پلاست یا جعبه محتوا تغییر داد.
• منشا پس زمینه
  • این ویژگی تعیین می کند که آیا پس زمینه باید مکان در جعبه بالشتک، جعبه مرز یا جعبه محتوا باشد.
• پسزمینه
  • این ویژگی به شما اجازه می دهد تا اندازه تصویر پس زمینه را نشان دهید. این اجازه می دهد تا شما را به کشش تصاویر کوچکتر متناسب با صفحه.

تغییرات در ویژگی های سبک سابقه موجود

همچنین تغییرات زیادی در خواص پس زمینه پیش زمینه وجود دارد:

• پس زمینه-تکرار
  • دو مقدار جدید برای این ویژگی وجود دارد: فضا و دور. فضاهای فضایی تصویر کاشی شده را به طور مساوی در داخل جعبه بدون اینکه از بین برود. گرد تصویر مجدد پس زمینه را به طوری که تعداد کل بار در جعبه کاشی.
• پس زمینه دلبستگی
  • مقدار جدید "محلی" اضافه شده است به طوری که پس زمینه با محتوای عنصر حرکت می کند زمانی که این عنصر دارای نوار پیمایش است.
• زمینه
  • اموال مختصر پس زمینه به اندازه و ویژگی های منشا افزوده می شود.

خواص مرزی CSS3

در مرزهای CSS3 می توان سبک هایی را که ما استفاده می کنیم (solid، double، dotted، etc.) می توانیم یا می توانیم یک تصویر باشد. علاوه بر این، CSS3 توانایی ایجاد گوشه های گرد دارد. تصاویر مرزی جالب هستند زیرا شما یک تصویر از چهار مرز ایجاد می کنید و سپس به CSS بگویید که چگونه این تصویر را به مرزهای خود اعمال کنید.

خواص مرزهای جدید

برخی از ویژگی های مرزی جدید در CSS3 وجود دارد:

• مرز-شعاع
  • مرز بالا سمت راست شعاع ، مرز پایین سمت راست شعاع ، مرز پایین پایین چپ رادیوس ، شعاع مرز بالا سمت چپ
  • این خواص به شما اجازه می دهد گوشه های گرد در مرزهای خود ایجاد کنید.
• border-image-source
  • فایل منبع اصلی را که به جای سبک های مرزی که قبلا تعریف شده استفاده می شود را مشخص می کند.
• border-image-slice
  • نمایشی از درجهای داخلی از لبههای تصویر مرزی است
• border-image-width
  • مقدار عرض تصویر تصویر مرزی را تعریف می کند.
• border-image-outset
  • مقدار مشخصی را که ناحیه تصویر مرزی در خارج از کادر مرزی قرار می گیرد تعیین می کند.
• border-image-کشش
  • تعریف می کند که چگونه قسمت ها و قسمت های متوسط ​​تصویر مرزی باید کاشی یا مقیاس پذیر باشد.
• border-image
  • اموال مختصر برای همه ویژگیهای تصویر مرزی.

ویژگی های اضافی CSS3 مرتبط با مرزها و زمینه ها

هنگامی که یک جعبه در یک شکست صفحه شکسته می شود، شکست ستون برای شکست خط (برای عناصر درون خطی) ویژگی مشخصه جعبه-دکوراسیون-تعریف می کند که چگونه جعبه های جدید با مرز و پلاگین پیچیده می شوند. پس زمینه را می توان با استفاده از این ویژگی بین چندین جعبه شکسته تقسیم کرد.

همچنین یک ویژگی جعبه سایه وجود دارد که می تواند برای اضافه کردن سایه به عناصر جعبه استفاده شود.

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

Columns CSS3 - تعداد و عرض ستون ها را تعریف می کند

سه ویژگی جدید وجود دارد که به شما امکان می دهد تعداد و عرض ستون های خود را تعریف کنید:

• عرض ستون
  • عرض ستونهای شما را مشخص می کند. مرورگر پس از آن متن را پر می کند تا فضای را با ستون های بزرگ پر کند.
• ستون شمارش
  • تعداد ستون ها در صفحه را مشخص می کند. مرورگر پس از آن ستون هایی را به اندازه کافی گسترده می کند تا در فضا مناسب باشند، اما فقط تعداد مشخصی را تعیین می کنند.
• ستون ها
  • اموال شرطی که در آن شما می توانید عرض یا شماره (یا هر دو را تعریف کنید، اما به ندرت حساس است) تعریف کنید.

شکافها و قوانین ستون CSS3

شکاف ها و قوانین بین ستون ها در یک سناریوی چندتایی قرار می گیرند. شکافها ستونها را از هم جدا می کنند، اما قوانین هیچ فضایی را نمی گیرند. اگر یک قاعده ستون گسترده تر از فاصله باشد، با ستون های مجاور همپوشانی خواهد شد. پنج ویژگی جدید برای قوانین ستون و فاصله وجود دارد:

• ستون شکاف
  • عرض فاصله بین ستون را تعریف می کند.
• ستون-rule-color
  • رنگ حکومت را تعریف می کند.
• ستون-rule-style
  • سبک حکومت را مشخص می کند (solid، dotted، double، و غیره).
• ستون rule-width
  • عرض قاعده را تعریف می کند.
• ستون حکومت
  • یک عنصر مختصر که همه ی ویژگیهای سه گانه ستون را در یک زمان تعریف می کند.

ستون های CSS3، ستون های پشته و ستون های پر شده است

شکاف های ستون از همان گزینه های CSS2 استفاده می شود که برای تعریف وقفه ها در محتوی صفحات استفاده می شود، اما با سه ویژگی جدید: break-before ، break-after و break-inside .

مانند جداول، شما می توانید عناصر را به ستون ها با ستون span اختصاص دهید. این به شما اجازه می دهد تا عناوین ایجاد کنید که چندین ستون را مانند یک روزنامه قرار دهید.

ستون پر می کند که چه مقدار محتوای در هر ستون تعیین می شود. ستون های متعادل سعی می کنند همان مقدار محتوا را در هر ستون قرار دهند در حالی که محتوای خودکار فقط به صورت خودکار جریان می یابد تا ستون پر شود و سپس به یک بعدی می رود.

ویژگی های بیشتر در CSS3 که Aren در CSS2 موجود است

بسیاری از ویژگی های اضافی در CSS3 وجود دارد که در CSS2 وجود ندارد، از جمله:

• ماژول طرح بندی CSS و CSS3 ماژول موقعیت جغرافیایی : ایجاد شبکه با CSS.
• ماژول CSS3 متن : متن اصلی و حتی ایجاد سایه افتادن با CSS.
• ماژول رنگ CSS3 : در حال حاضر با کدورت.
• تغییرات در مدل جعبه : از جمله اموال مارپیچی که مانند برچسب IE عمل می کند.
• CSS3 ماژول رابط کاربر : به شما نشان می دهد مکان نما جدید، پاسخ به اقدامات، زمینه های مورد نیاز، و حتی تغییر اندازه عناصر .
• پرس و جوهای رسانه : نمایش داده های رسانه ای به شما اجازه می دهد انعطاف پذیری بیشتری در هنگام تعیین نحوه استفاده از یک ورق سبک داشته باشید. به عنوان مثال، شما می توانید یک ورق سبک را تعریف کنید که فقط برای دستگاه های دستی است که دارای نمایشگر بزرگتر از 20 است.
• ماژول CSS3 روبی : پشتیبانی از زبان هایی است که از ruby ​​text استفاده می کنند تا حاوی اسناد نویسی شوند.
• ماژول CSS3 Paged Media : برای پشتیبانی حتی بیشتر از رسانه های پیجینگ (کاغذ، شفاف و غیره).
• محتوای تولید شده : L حاوی هدر ها و پاورقی ها، پانویس ها و سایر محتویاتی است که به صورت برنامه نویسی تولید می شوند، مخصوصا برای رسانه های پیجینگ.
• CSS3 ماژول گفتار : تغییرات در CSS عریض.