CSS3 به طور خلاصه - ویژگی های جدید و آنچه که می تواند انجام دهد

گرچه زمان آن رسيده که رسما آزاد شده است. اگر هنوز مقاله ای در HTML5 ندیده اید، من به شدت به شما توصیه می کنم این کار را انجام دهید، زیرا CSS3 با آخرین زبان نشانه گذاری از کنسرسیوم جهانی وب بهتر کار می کند.

CSS2 در سال 1998 ظاهر شد، و از آن زمان در اینترنت زیاد اتفاق افتاده است. تنها بازنگری آن در سال 2011، CSS2.1 ساخته شد، اما کارشناسان صنعت می گویند که این موضوع تنها زمانی بود که تا زمان انتشار CSS3، ویژگی های آن کاملا ضروری بود و در طی سال های گذشته از دست رفته بود. <
جعبه ابزار طراح شما
نامحدود دانلود: 500،000+ قالب وب، مجموعه آیکون، تم ها و طراحی دارایی

آنچه که بسیاری از افراد درباره CSS3 نمی دانستند این بود که توسعه آن تنها یک سال پس از ارائه نسخه قبلی آغاز شد. بنابراین، W3C از سال 1999 تاکنون نسخه ی پایدار نسخه CSS3 را از 12 سال تاکنون در حال کار بر روی این نسخه بهبود یافته است.

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

شما همچنین ممکن است دوست داشته باشید: معرفی HTML5 .

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

CSS3 در یک نازل و تفاوت اصلی به CSS2

شاید بزرگترین تفاوت بین CSS2 و CSS3 تفکیک ماژول ها باشد. در حالی که در نسخه قبلی، همه چیز یک مشخصه ی بزرگ بود که ویژگی های مختلفی را تعریف می کرد، CSS3 به چندین اسناد معروف است که modules نامیده می شوند.

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

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

پرس و جو رسانه ها به راحتی کار می کنند و هنگامی که شما تقریبا تنظیم می کنید، از آنها استفاده می کنید. بیایید در برخی از خطوط کد زیر نگاه کنیم.

با شروع به سبک در پرس و جوی رسانه در بالا، شما فقط برای صفحه نمایش با عرض حداکثر 600 پیکسل سبک. در مثال بالا، تمام صفحات با حداکثر عرض 600 پیکسل یک پس زمینه سفید را نشان می دهد.

با این حال، حداکثر عرض تنها شرطی نیست که شما می توانید در مورد یک شیء اعمال کنید. شما همچنین می توانید max-device-width (که بر خلاف max-widthکه ناحیه view است، رزولوشن صفحه است)، میتوانید از min به جای حداکثر ، اما شما همچنین می توانید دو شرایط مانند مثال زیر را ترکیب کنید که تنها برای صفحه نمایش هایی با یک منطقه مشاهده بین 600 تا 900 پیکسل اعمال می شود.

CSS3 دارای برخی از شیوه های از پیش تعیین شده برای دستگاه های قابل حمل مانند آی فون یا اپل است که می توانید در زیر ببینید:

و

& nbsp؛

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

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

همانطور که می بینید، بسیار ساده تر از قبل است.

Gradients نیز در CSS3 موجود است، علاوه بر این علاوه بر خنک که ما می خواستیم ببینیم برای برخی از زمان ها، و همچنین سایه جعبه/متن و تصاویر مرزی.

به منظور افزودن سایه متن به محتوا بدون هیچ گونه هک، CSS3 به سادگی نیاز به چیزی شبیه به خط زیر دارد:

ایجاد ستون برای محتوا هرگز آسان تر از CSS3 نیست، زیرا اکنون چهار خط کد را می توانید در هر زمانی استفاده کنید. اینها عبارتند از:

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

پیشوند های فروشنده

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

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

مثال ها

نمونه های زیادی از CSS3 وجود دارد که می توانم به شما نشان دهم، همانطور که معمولا در همکاری با HTML5 یا jQuery استفاده می شود. CSS برای یک ظاهر طراحی و پیشرفت است نه برای ایجاد برنامه های کاربردی. بنابراین فقط دو لینک جالب وجود دارد که می خواهم با شما به اشتراک بگذارم.

از کجا یاد بگیریم؟

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

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

Conclusion

HTML5 و CSS3 در اینجا برای ماندن هستند و در ترکیب این دو ابزار بسیار قدرتمند هستند و می توانند راه حل های زیبا و با کیفیت بالا را ایجاد کنند.
بنابراین شما باید آنها را یاد بگیرید و امروز آنها را شروع کنید، در غیر اینصورت، شما پشت سر هم رقبایتان می افتد.
همانطور که قبلا وعده داده شده، شروع به کار بر روی چندین آموزش HTML5/CSS3 می کنم تا شما بتوانید حتی از 1WD نیز یاد بگیرند. با این حال، تا زمانی که این اتفاق بیفتد، لطفا اطمینان حاصل کنید که حداقل برخی از دانش اساسی از HTML5 و CSS3، به طوری که همه ما در همان صفحه زمانی که ما شروع می کنیم. دفعه بعد شما را ببیند!

src = "0.jpg