نکات و تکنیک های مفید CSS - مجله Smashing

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

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

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

Cascade And Specificity Primer

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

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

تست HTML با CSS مدرن

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

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

خود تغییر متغیرهای CSS

مشخصات CSS برای خصوصیات سفارشی اجازه a ویژگی سفارشی برای ارجاع به خود - اگرچه موارد استفاده زیادی وجود دارد که چنین ویژگی می تواند مفید باشد. برای پر کردن این شکاف، لئا ورو پیشنهاد داد inherit() عملکرد در سال 2018، که CSSWG در سال 2021 به مشخصات اضافه کرد. هنوز ویرایش نشده است، اما رومن کوماروف راه حلی پیدا کرده است که شروع به درگیر کردن رفتار آن را ممکن می سازد.

رویکرد رومن از کوئری های Container-style به عنوان راهی برای دسترسی به وضعیت قبلی یک ویژگی سفارشی استفاده می کند. زمانی که بخواهید می تواند مفید باشد چرخه در رنگ های مختلف بدون داشتن لیست ایستا از مقادیر، برای مطابقت با border-radius برای مثال، به صورت بصری، یا برای تودرتو کردن فهرست های منو. راه حل هنوز کاملاً آزمایشی است (بنابراین از آن در تولید استفاده نکنید!)، اما از آنجایی که احتمالاً درخواست های سبک قبلاً پشتیبانی گسترده مرورگر را به دست خواهند آورد. inherit()، پتانسیل بالایی دارد.

علامت گذاری آویزان در CSS

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

جرمی کیت متوجه یک عارضه جانبی ناخواسته شد hanging-punctuation، اگر چه. هنگامی که آن را به صورت سراسری اعمال می کنید، برای تشکیل فیلدها نیز اعمال می شود. بنابراین، اگر متن در یک فیلد فرم با یک علامت نقل قول یا نقطه گذاری دیگری شروع شود، به خارج از فیلد فشار داده می شود و پنهان می شود. جرمی یک راه حل برای آن به اشتراک می گذارد: افزودن input, textarea { hanging-punctuation: none; } برای جلوگیری از ناپدید شدن علامت نقل قول شما یک نکته کوچک که می تواند شما را از سردردهای زیادی نجات دهد.

تثبیت aspect-ratio مسائل

را aspect-ratio خاصیت در محیط های سیال می درخشد. این می تواند هر چیزی از قرار دادن یک مربع شکل را اداره کند

to matching the 16:9 size of a ، بدون اینکه در ابعاد دقیق فکر کنید. و بیشتر اوقات این کار را بدون نقص انجام می دهد. با این حال، برخی وجود دارد چیزهایی که می توانند بشکنند aspect-ratio. کریس کویر نگاهی دقیق تر به سه دلیل می کند aspect-ratio ممکن است مطابق انتظار کار نکند

همانطور که کریس توضیح می دهد، یک شکست احتمالی هر دو بعد را تنظیم می کند - که ممکن است بدیهی به نظر برسد، اما اگر یکی از ابعاد از جایی تنظیم شود که شما انتظارش را نداشتید می تواند گیج کننده باشد. کشش و محتوایی که باعث افزایش ارتفاع می شود نیز می تواند منجر به نتایج غیرمنتظره شود. یک نمای کلی عالی از اینکه چه زمانی باید به دنبال آن باشید aspect-ratio می شکند.

چیدمان سنگ تراشی با CSS

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

در حال حاضر وجود دارد دو رویکرد در بحث در گروه کاری CSS در مورد اینکه CSS چگونه باید چیدمان های سبک سنگ تراشی را مدیریت کند - و آنها از توسعه دهندگان و طراحان دنیای واقعی برای یافتن بهترین راه حل می خواهند.

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

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

مهارت های CSS خود را تقویت کنید

اگر می خواهید عمیق تر در CSS غواصی کنید، ما از شما حمایت می کنیم - با چند رویداد دوستانه و SmashingConfs که امسال در راه است:

ما بسیار خوشحال خواهیم شد که شما را به یکی از تجربیات Smashing خاص خود خوشامد بگوییم - چه آنلاین و چه حضوری!

خبرنامه هفتگی شکست

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

همچنین با عضویت، هیچ گونه پست شخص ثالث یا تبلیغات پنهانی وجود ندارد و حمایت شما واقعاً به ما در پرداخت قبوض کمک می کند. ❤️

علاقه مند به حمایت مالی هستید؟ با خیال راحت گزینه های شراکت ما را بررسی کنید و در هر زمان با تیم تماس بگیرید - آنها مطمئناً در اسرع وقت با شما تماس خواهند گرفت.