شما ممکن است وسوسه شوید از این ترفندهای CSS استفاده کنید

شما ممکن است وسوسه شوید از این ترفندهای CSS استفاده کنید

شما ممکن است وسوسه شوید از این ترفندهای CSS استفاده کنید

شما ممکن است وسوسه شوید از این ترفندهای CSS استفاده کنید

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

خواص بد بکار برده شده

font-size-adjust

اگر شما با فونت وب انتخاب شده خود و رندر جایگزین موافق نباشید، این ویژگی برای شما مناسب است. اما در حال حاضر این ویژگی گرچه بخشی از Spec CSS3 است ولی فقط به کاربران فایرفاکس مزایا می دهد. این امر عمدتا به شیوه های مختلفی انجام میشود که مرورگرهای مختلفی که از آن استفاده می کنند فونت ها را ایجاد می کنند. ویژگی font-size-adjust با استفاده از اندازه فونت اصلی و تقسیم آن با مقدار font-size-adjust برای هر فونت احتمالی تعریف شده کار می کند. برای بدست آوردن بهترین نتایج، آزمایش و خطا را بیشتر از حد انجام داده و با توجه به، اندازه اولیه فونت به مرورگر آن را ارائه می دهد. مثال کلی:

h1{ font-family: 'Alagreya SC', 'georgia', serif; font-size: 2rem; font-size-adjust: 0.5; }

اگر Alagreya بارگذاری نشود عنوان گرجستان یا پیش فرض serif نمایش داده می شود، که آن را در 1rem، .5 یا  2rem  / 50% نشان میدهد.

ویژگی font-size-adjust نباید با  text-size-adjust  که به طور خاص برای نمایش متن تلفن همراه است اشتباه گرفته شود. برخی از مرورگرهای تلفن همراه الگوریتم متن را برای افزایش اندازه متن درون یک عنصر بدون توجه به اینکه CSS برای جلوگیری از آن وجود داشته باشد، اعمال می کند. در صورتی که وب سایت برای تلفن همراه طراحی میکنید از همان ابتدا از متن متناسب استفاده کنید تا نیاز نباشد در تنظیم مجدد آن را تغییر دهید،. مثلا:

body{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

font-stretch

این ویژگی اغلب با تنظیم font-size یا روشهای دیگر دستکاری در نحوه رندر فونت اشتباه گرفته میشود. در حقیقت، این مورد تنها به شما اجازه می دهد یک قلم متناوب یا فونت اعلام شده را انتخاب کنید. به عنوان مثال، شما ممکن است OTF  Roboto را در سند خود داشته باشید، که دارای نسخه ی چسبنده است. font-stretch اجازه می دهد تا این کار را بدون اعلام مجددfont-family تنظیم کنید:

h1{ font-stretch: condensed; }

شما نمی خواهید این مورد را با font-variant  که فقط اجازه می دهد تا چیزهایی مانند لیگاتورها، کلاهک های کوچک را که بخشی از یک فونت باز است که در جدول تناوبی قرار داده اید فعال کنید اشتباه بگیرید.

font-smoothing

-webkit-font-smoothing، -moz-osx-font-smoothing و font-smooth برای فشرده سازی برای رندر زنجیری در برخی از دستگاه ها و مرورگرها برای برخی از فونت ها است. که کاملا موقعیتی و در نتیجه غیر قابل پیش بینی در طراحی هستند. در حالی که این ویژگی ها منجر به هیچ مشکلی جدی نمی شود، تنها -webkit-font-smoothing وmoz-osx-font-smoothing هنوز در مرورگرهای جدیدتر پشتیبانی می شوند، اما غیر استاندارد هستند.

clip-path

خصوصیات clip-path در CSS4 به ما امکان را می دهد که مقدار هندسی، شکل ظاهری یا مسیر فایل SVG که شکل عنصر را مشخص می کند را تعیین کنیم. این مورد برای قرار دادن پس زمینه روی اشکال پیچیده از جمله متن مفید است. (برای مشاهده این موضوع نیاز به Chrome یا Safari دارید): اما همانطور که می بینید، فایل های SVG خارجی در حال حاضر پشتیبانی نمی شوند، و clip-path برای کار نیاز به ویژگی های تجربی فعال در مرورگر وب دارد. توجه داشته باشید که فایرفاکس هنوز از اشکال پشتیبانی نمی کند و در IE هم کار نمی کند.

object-fit

این ویژگی مفید به شما اجازه می دهد که عناصر img و video را همانند تصاویر پس زمینه با ارائه سه روش اصلی که تصویر را می توان در داخل بسته بندی آن قرار داد: مقیاس کردن، حاوی یا پوشش. موقعیت آن درست مثل موقعیت پس زمینه کار می کند،و به شما این امکان را می دهد که تصویر یا ویدیو را درون بسته بندی آن بدون حاشیه و متن قرار دهید.از طریق این ارزش ها، تصاویر و فیلم ها می توانند سطح پاسخگویی را که با اندازه صفحه نمایش سازگار تر است نشان داده و به ما کمک کنند تا از راه های جاوا اسکریپت مانند Fitvit و قوانین پیچیده CSS مشکلات به وجود آمده را حل نماییم. استفاده از object-fit برای پشتیبانی از IE ، ایمن است، اما مهم است که پیاده سازی خود را با استفاده از یک ابزار مانند Google Resizer تست کنید تا اطمینان حاصل کنید که پوسته هایتان به طور مناسب به عناصر مقیاس پذیر می پردازند.

ترکیب CSS

background-blend-mode و mix-blend-mode خواص جدید هیجان انگیزی هستند که به شما اجازه می دهند که ترکیب بین تصاویر، شیب ها و رنگ های مشابه حالت های لایه فتوشاپ را ببینید.در ساده ترین حالت، حالت های ترکیبی هر عنصر همپوشانی عناصر را می سازد و آنها را با استفاده از حالت های مشخص شده ترکیب می کنند. در این مثال، ما یک تصویر پس زمینه بر روی بدن و یک هدر رنگی در بالای آن با mix-blend-mode صفحه نمایش وجود دارد. این اجازه می دهد تا پس زمینه هدر رنگی با پس زمینه تصویر در زیر ترکیب شود.تکنیک های استفاده شده برای به دست آوردن اثرات در اکثر موارد مشکل نیست، اما حالت های ترکیبی در حال حاضر در اینترنت اکسپلورر و برخی از مرورگرهای تلفن همراه پشتیبانی نمی شود و تنها پشتیبانی جزئی در Safari است.

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

CSS Grid

CSS Grid با هدف ارائه یک وسیله ساده برای کنترل طرح کلی، در شیوه استفاده از جداول استفاده می شود. Flexbox به ما اجازه می دهد تا چگونگی محتوای درون آن ها را کنترل کنیم.

Calc()

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

  • IE11 گزارش شده است که calc() به درستی در محتوای تولیدی پشتیبانی نمی کند
  • گزارش شده است IE & Edge از calc در داخل 'flex' پشتیبانی نمی کند. (در نسخه های قدیمی تر آزمایش نشده است)
  • IE9-11  هنگامی که calc()  برای هر یک از مقادیر استفاده می شود
  • IE10 زمانی که div با یک املاک با استفاده از calc() یک فرزند با اموال مشابه با ارث دارد، خراب می شود.

input { padding: 2px; display: block; width: 98%; /* fallback for browsers without support for calc() */ width: calc(100% - 20px); }

استفاده از property width می توان calc() را برای ایجاد عناصر پاسخگو استفاده کرد که احتمالا امن ترین کاربرد آن است.

Pseudo-Classesهای جدید

:dir()

فیلد pseudo کلاس dir بر عناصری که متن درون آن خوانده می شود را برمی گرداند. به طور معمول این مشخصه dir است.

از آنجا که [dir] دقیق است و نیاز به یک مقدار دارد، dir() می تواند محاسبه هوشمندانه تر محتوای محتوای عنصر را حتی اگر یک مقدار اولیه یا خودکار بر روی ویژگی تنظیم شود به ما بدهد. dir () جهت صریح در سند HTML را تعیین می کند،

 یعنی <article dir = "rtl"> پس اگر شما یک مسیر متن را با استفاده از CSS تنظیم کرده اید، هنوز نیازی به بازنویسی سبک های CSS و یا استفاده از آنها برای طراحی زبان های RTL ندارید. : dir()  قصد دارد فوق العاده مفید باشد، و هنگامی که به طور کامل اجرا شود، یک پیشرفت بزرگ برای طراحان وب سایت های چند زبانه خواهد بود. در حال حاضر، حمایت زیادی ندارد،و در مرحله آزمایش تجربی است .

:matches() و :any()

هر دو این انتخابگر یک کار را انجام میدهند:هرشبه کلاس حمایت شده با (-webkit) و: matches () جایگزین آن در CSS4 است. به غیر از اشتباه کردن به دلیل تغییر نام، این شبه کلاس باید به طور کامل شناخته شود قبل از اینکه بتوانید از آن استفاده کنید.

matches()  در حال حاضر می تواند به شما کمک کند تا CSS خود را محکم کنید و سبک را برای خواندن آسان تر کنید. این نیز در بعضی موارد باعث افزایش عملکرد نیز شود. مثلا:

section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1, { font-size: 20px; }

متغیرهای CSS

شما باید از متغیرهای CSS استفاده کنید. اگر شما نمیدانید CSS Variable چیست، این شیوه ساخت CSS مانند LESS است. که به شما اجازه می دهد چیزهای بسیار جالبی مانند ایجاد مجموعه ای از پیش فرض ها در ابتدای سند خود ایجاد کنید:

:root{ --main-color: #777; --dark-color: #333; --main-font: 'Source Sans Pro'; --link-color: #f00; --gap: 20px; } body{ color: var(--main-color); font-family: var(--main-font); } a{ color: var(--link-color); } article strong{ color: var(--dark-color); } .sidebar .widget{ margin: var(--gap); }

بنابراین، همانطور که می بینید، متغیرها راهی برای ساخت شیوه های بیشتری دارند. آنها همچنین از CSS سنتی و پیش پردازنده هایی مانند LESS در توانایی خود در داخل پرس وجوهای رسانه استفاده می کنند. در اینجا یک مثال عالی از استفاده از یک متغیر برای تنظیم پیش فرض ذکر شده است، آن را برای تلفن های موبایل تنظیم کنید:

واحد های اندازه فونت غیر متعارف

در CSS تعداد زیادی از واحدها برای انتخاب وجود دارد، اما ما تمایل داریم که از یک واحد استفاده از کنیم؛ زیرا این همان چیزی است که ما در CSS آموختیم. رایج ترین واحد پیکسل است که می توان آن را در مورد هر چیزی استفاده کرد - این انتخاب بهترین انتخاب برای متن نیست، زیرا تراکم پیکسل در هر دستگاه ممکن است متفاوت باشد.واحد های موجود که به عنوان em، ex، ch و rem و درصد٪ جهانیتر بوده اند . مشکل این است که هیچ کدام از اینها برابر نیستند، بنابراین کدام بهترین است؟

واحد های مرتبط

واحد EM به طور گسترده ای در  متن و حاشیه ها استفاده می شود، اما دارای یک نکته مهمی است که خود را با هر اندازه اعلام شده افزایش می دهد. بنابراین اگر اندازه پیش فرض شما معادل  14PXاست، مقدار اول عنصر em 1.2 ممکن است متن را به 16/8PX برساند و اگر علامت دیگری em را برای یک عنصر تنظیم کند، آن را به 16/8PX اضافه می کند. به همین دلیل، em واقعا بهترین گزینه برای اندازه فونت نیست.

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

نظرات خود را با ما در میان بگذارید

(0)نظر


ارسال دیدگاه

ارسال دیدگاه

گروه بندی مطالب

برچسب ها