بسیاری ادعا می کنند CSS زبان برنامه نویسی نیست. موافقم – سخت تره. تسلط بر CSS به مهارت هایی در زمینه طراحی ، تعیین ، ابتکار ، تجربه و همچنین کدگذاری نیاز دارد (به ویژه هنگام استفاده از پیش پردازنده هایی مانند ساس)
CSS حاکی از طرح ها و سبک ها در مرورگر. یک مرورگر می تواند آن پیشنهادها را به هر روشی که انتخاب کند ، تفسیر کند و حتی در این صورت ، کاربر یا دستگاه می تواند از ویژگی ها چشم پوشی کند یا آنها را نادیده بگیرد. ایجاد کد با کارایی بالا که در همه دستگاه ها و وضوح صفحه نمایش به خوبی کار کند چالشی است که تعداد کمی آن را امتحان می کنند یا با موفقیت آن را کامل می کنند. با این حال ، پاداش ها می توانند نشاط آور باشند.
با ساده ترین کار ، با استفاده از کتابهای موجود در SitePoint Premium ، پیشنهادات پروژه زیر به شما در مسیر تسلط بر CSS کمک می کنند.
1. یک سایت مناسب چاپگر ایجاد کنید
از سایتی که در آن کار می کنید بازدید کنید و سعی در چاپ صفحه (یا چاپ پیش نمایش) دارید. آیا از نتایج راضی هستید؟
صفحات HTML یک رسانه مداوم هستند که لزوماً در رسانه های چاپی به خوبی کار نمی کنند. بخشهای نامناسب ، مقیاس بندی ، اندازه متن ، ابعاد ستون و محتوای از دست رفته یا بریده شده همه منجر به تجربه چاپ غیرقابل دسترسی می شود که تعداد کمی از توسعه دهندگان در نظر دارند.
خوشبختانه چاپ CSS در عرض چند ساعت قابل توسعه است. به طور کلی مسئله تنظیم مجدد سبک ها (سیاه و سفید) ، حذف بخشهای غیرضروری (منوها ، تصاویر قهرمان ، فرم ها ، ابزارک های رسانه های اجتماعی و غیره) ، طرح بندی خطی و کاهش نیاز به کاغذ و جوهر است.
وارد ابزارهای توسعه دهنده مبتنی بر مرورگر (از CSS Master) و اسرار مرورگر DevTool شوید تا نحوه بررسی و اصلاح سبک ها را پس از تغییر به چاپ چاپ کشف کنید.
استفاده از CSS به طور مشروط نحوه تعریف را شرح می دهد @media قوانین پرس و جو از جمله print شیوه نامه ها.
برای تعیین اینکه آیا متغیرهای CSS می توانند به خواص چاپ کمک کنند ، راهنمای استراتژی خود را برای ویژگیهای سفارشی CSS (از New Frontiers in Design Web) در نظر بگیرید. برای خاموش کردن انیمیشن ها یا چاپ آنها در بهترین حالت ، قابلیت دسترسی (از CSS Animation 101) را نیز در نظر بگیرید.
سرانجام ، نحوه ایجاد صفحات مناسب چاپگر با CSS (از CSS Tools & Skills) یک آموزش کامل بهینه سازی چاپ را به همراه نکاتی برای صرفه جویی در هزینه جوهر و کاغذ ارائه می دهد.
2. طراحی CSS مدرن را در یک سایت موجود اعمال کنید
یک طرح تک رنگ خسته کننده است! هر کس انتظار دارد که یک گزینه حالت تاریک در سیستم عامل و برنامه های خود داشته باشد ، پس چرا یکی را به وب سایت خود اضافه نمی کنید؟
تا همین اواخر ، سوئیچرهای تم معمولاً به یک مجموعه سبک اضافی با کنترلهای سوئیچینگ مجهز به JavaScript نیاز داشتند. با این حال ، مرورگرهای مدرن با CSS Custom Properties (متغیرها) و موارد دیگر زندگی را آسان می کنند prefers-color-scheme @media قانون.
Strategies for Theming (از New Frontiers in Web Design) طیف وسیعی از ایده ها و ملاحظات را هنگام طراحی موضوع جدید شما فراهم می کند.
استفاده از CSS به طور مشروط (از زبان CSS Master) نحوه تعریف را شرح می دهد @media قوانین پرس و جو از جمله prefers-color-scheme.
سرانجام ، Modern CSS: افزودن یک تم تاریک CSS (از Modern CSS) یک آموزش کامل برای زمینه های تاریک را فراهم می کند.
3. طرح بندی فرم را دوباره انجام دهید
در فرم خود مانند فرم استعلام یا ثبت نام در وب سایت خود بررسی کنید. مگر اینکه اخیراً کدگذاری شده باشد ، احتمالاً با DIV کانتینرها و طرح های مبتنی بر شناور که احتمالاً در صفحه های کوچکتر خراب می شوند ، اجرا می شود. فرم های قدیمی ممکن است از JavaScript غیرضروری استفاده کنند یا قابلیت دسترسی ضعیفی داشته باشند.
یک فرم ثبت نام (از الگوهای طراحی فرم) بهترین روش های طراحی ، سبک و کدگذاری فرم را با استفاده از HTML5 شرح می دهد.
CSS Grid به شما امکان می دهد بدون استفاده از سupالات رسانه ای ، علامت گذاری های غیرضروری را از بین ببرید و طرح های واکنشی ضد گلوله ایجاد کنید. آموزشهای CSS Grid زیر سرعت شما را بالا می برد:
سرانجام ، Make Forms Great with CSS Grid (از CSS Grid Layout) یک آموزش کامل را ارائه می دهد که طرح بندی فرم مبتنی بر شبکه را با مرورگرهای شناور برای مرورگرهای قدیمی فراهم می کند.
4. سایت خود را سریعتر کنید
در ابتدای سال 2020 ، متوسط صفحه وب نیاز به بارگیری 2 مگابایتی دارد که به طور کامل در یک دستگاه تلفن همراه متوسط 20 ثانیه طول می کشد. CSS 65KB را در هفت پرونده پخش می کند. این ممکن است مهم به نظر نرسد ، اما ویژگی های صفحه سبک می تواند تفاوت ایجاد کند.
چند ساعت را به بررسی سایت موجود خود اختصاص دهید تا تعیین کند که آیا می توان تصاویر ، قلم ها و جلوه های جاوا اسکریپت را با CSS کارآمدتر جایگزین یا بهینه کرد. کد CSS شما ممکن است رشد کند ، اما وزن کلی کاهش می یابد و عملکرد به طور محسوسی بهبود می یابد.
ابزارهای تست (از Jump Start Web Performance) و اشکال زدایی برای UI Responsiveness (از CSS Master) نحوه استفاده از مرورگر مدرن DevTools برای ارزیابی عملکرد و کشف اهداف بهینه سازی را توضیح می دهند.
بارگذاری دارایی ها در وب (از New Frontiers in Web Design) نحوه استفاده از تکنیک هایی مانند CSS مهم و بارگذاری تدریجی CSS را برای اطمینان از بارگیری موثر صفحه های سبک بیان می کند. 20 نکته برای بهینه سازی عملکرد CSS (از CSS مدرن) مجموعه ای از نکات کاربردی را ارائه می دهد.
سرانجام ، Jump Start Web Performance شامل ده ها پیشنهاد توسعه سریع ، شدیدتر و تغییر دهنده زندگی است تا اطمینان حاصل شود که سایت شما برای همه سریع است.
5- یک پروژه جدید یا کامپوننت CSS را شروع کنید
از پیشنهادات پروژه فوق می توان برای بهبود یک سایت موجود استفاده کرد ، اما هنگام شروع یک پروژه جدید از ابتدا هیچ محدودیتی و محدودیتی وجود ندارد. گزینه های در نظر گرفتن:
- یک رزومه آنلاین بسازید. امتیازات اضافی برای اطمینان از پاسخگویی ، چاپ خوب و رمزگذاری همه دارایی ها در یک فایل HTML که می تواند از طریق ایمیل ارسال شود. (نکته: از اطمینان از جلوگیری از جاوا اسکریپت توسط سیستم های ایمیل جلوگیری کنید.)
- یک نمونه کارها تعاملی ایجاد کنید. هنگامی که روی مورد کلیک می شود ، یک لیست گرافیکی از تمام سایت های شما با اطلاعات اضافی است. طرح بندی Grid ایده آل است اما اگر واقعاً یک چالش می خواهید ، یک طرح سنگ تراشی را امتحان کنید. (CSS Grid هنوز نمی تواند این مورد را پیاده سازی کند ، اما در نظر بگیرید که چگونه می توان با استفاده از ستون های CSS یا یک طرح بندی Grid به صورت عمودی به آن دست یافت).
- یک طرح گرافیکی را کدگذاری کنید. شاید یک ایده جذاب را انتخاب کنید دریبل زدن یا یک جامعه طراحی مشابه و کد HTML5 و CSS3 را کد کنید. امتیازات اضافی برای ایجاد بدون چارچوب یا جاوا اسکریپت!
- فقط تصاویر CSS ایجاد کنید. مجموعه ای از آیکون های مفید ایجاد شده توسط عناصر شبه و اشکال CSS را ایجاد کنید یا با استفاده از شیب ها و سایه ها یک تصویر بسازید.
- با انیمیشن های SVG و CSS آزمایش کنید. آرم ، نمودار ، نوار پیشرفت ، چرخان فعالیت و موارد دیگر را ایجاد کنید.
ابزارهای توسعه دهنده و مرورگر:
ایده های شبکه CSS:
تکنیک های CSS پاسخگو:
انتقال و انیمیشن های CSS:
ترکیب CSS با SVG:
حالا خواندن را متوقف کنید و کدگذاری کنید!
