ما ویژگی های جدید و هیجان انگیز CSS را بررسی می کنیم. در این مقاله، ما به بررسی پنج ویژگی جدیدی که به CSS اضافه خواهد شد، و عملکرد آنها و نحوه استفاده عملی از آنها خواهیم پرداخت. ما قصد داریم یک طرح وب سایت برای یک صفحه ایجاد کنیم که شامل یک خبرخوان و یک جعبه گفتگو کوچک در گوشه صفحه باشد. برای ترفندهای بیشتر درمورد CSS، به مقاله ما در مورد نمونه های مختلف CSS متحرک نگاهی بیاندازید.
برای این آموزش شما به نرم افزار کروم 65+ یا فایرفاکس 59+ نیاز دارید. با مراجعه به GitHub به صورت گام به گام کد مورد نظر را دریافت نمایید. ما از برنامه های زیر برای کار کرد راحت در مورد برخی مسائل استفاده می کنیم.
CSS Display Module (سطح 3)
نمایش: محتویات؛
وضعیت W3C – پیش نویس کار
پشتیبانی مرورگر
CSS Conditional Rules Module (سطح 3)
@support(…) {…}
وضعیت W3C – پیشنهاد کاندید
خواندن بیشتر: MDN web docs
CSS Overscroll Behavior Module (سطح 1)
overscroll-behavior: شامل؛
وضعیت W3C – غیر رسمی
پشتیبانی مرورگر
بیشتر: اسکرول خود را کنترل کنید
CSS Selectors Module (سطح 4):
تمرکز: داخلی
وضعیت W3C – پیش نویس کار
پشتیبانی مرورگر
بیشتر: MDN web docs: focus-in،: placeholder-shown
The CSS Containment Module (سطح 1)
حاوی: رنگ
وضعیت W3C – پیشنهاد کاندید
پشتیبانی مرورگر
بیشتر: قفل کردن CSS در کروم 52
HTML را برای خبرخوان با CSS تنظیم کنید
ابتدا باید یک نشانه فوق العاده ساده و تکراری برای خبرخوان خود ایجاد کنیم. بیایید یک Div Container با لیست غیر سفارشی در داخلش ایجاد کنیم. به <ul> کلاس .feed بدهید، سپسیک لیست 10 آیتمی ایجاد کنید که حاوی div با کلاس .Card و کارت 1، کارت 2 و غیره باشد.
در نهایت یک لیست 5 یا 6 آیتمی با کلاس of .nested ایجاد کنید – این کار بعدا مفید خواهد بود – و با اضافه کردن یک <ul> در داخل آیتم های سه لیستی با استفاده از کارت Card A، Card B و غیره این مرحله را به اتمام برسانید.
<body>
<div class=”container”>
<ul class=”feed”>
<li><div class=”card”>Card 1</div></li>
<li><div class=”card”>Card 2</div></li>
<li><div class=”card”>Card 3</div></li>
<li><div class=”card”>Card 4</div></li>
<li><div class=”card”>Card 5</div></li>
<li class=”nested”>
<ul>
<li><div class=”card”>Card A</div></li>
<li><div class=”card”>Card B</div></li>
<li><div class=”card”>Card C</div></li>
</ul>
</li>
<li><div class=”card”>Card 6</div></li>
<li><div class=”card”>Card 7</div></li>
<li><div class=”card”>Card 8</div></li>
<li><div class=”card”>Card 9</div></li>
<li><div class=”card”>Card 10</div></li>
</ul>
</div>
</body>
سبک خبرخوان
حالا ما باید سبک های آماده و در دسترس را اضافه کنیم تا بیشتر شبیه به یک خبرنامه باشد. ابتدا می توانیم به <body> یک رنگ پس زمینه خاکستری دهیم. سپس می توانید حداکثر عرض 800px را وارد کنید و از حاشیه 0 auto؛ برای تنظیم آن در مرکز صفحه استفاده کنید.
بگذارید به .card نیز یک رنگ پس زمینه سفید، حاشیه 10 پیکسل و در نهایت یک کمترین ارتفاع ممکن یعنی 300 پیکسل بدهیم. این کار باید به اندازه کافی برای کارتی کردن صفحات کافی باشد. در نهایت، ما از برخی از جادوهای Flexbox بر روی .feed استفاده کردیم تا آیتم ها به خوبی، به صورت دو کارت در هر ردیف نمایش داده شود.
.feed {display: flex;flex-wrap: wrap;}.feed li {flex: 1 0 50%;}
رفع مشکلات طرح با CSS
اگر شما به قسمت پایین لیست بروید متوجه خواهید شد که کارت های ما در لیست توزیع، کارت A – C ، باعث ایجاد برخی مشکلات طرح صفحه می شوند. در حالت ایده آل ما می خواهیم آنها را با بقیه کارت ها جریان پیدا کنند اما همه آنها در یک بلوک گیر می کنند. دلیل این امر این است که قالب انعطاف پذیر – که با استفاده از صفحه نمایش ایجاد می شود: flex – تنها کودکان فوری آن را (یعنی آیتم های لیست) را به موارد انعطاف پذیر تبدیل می کند.
حالا، به طور معمول تنها راه حل مشکل این است که نشانه گذاری را تغییر دهید، اما بیایید فرض کنیم که این امکان را ندارید. شاید نشانه گذاری خبرخوان توسط یک اسکریپت شخص ثالث یا کد میراثی آن ایجاد شده باشد که فقط سعی دارید آن را برطرف کنید. پس چگونه می توانیم این مشکل را حل کنیم؟
در نمایشگر خود داشته باشید: contents. این یک خط کوچک، اساسا اگر یک عنصر را مجبور به کاری می کند که در آنجا وجود نداشته باشد. شما هنوز هم نسخه ای از عنصر را مشاهده می کنید، اما عنصر خودش بر روی طرح تاثیر نمی گذارد.
از آنجا که ما فرض می کنیم که نمیتوانیم نشانه گذاری را تغییر دهیم (فقط برای این مرحله)، ما می توانیم کمی در مورد این موضوع هوشمند باشیم و عناصر flex و تقریبا کل نشانه گذاری را نادیده بگیریم.
ابتدا .feed li class موجود را حذف کنید و سپس از صفحه نمایش استفاده کنید: contents for both <ul> and <li> elements:
.feed ul,
.feed li {
display: contents;
}
اکنون باید حرکت مناسب کارت ها را ببینید، اما اندازه ها را از دست داده ایم. اندازه ها را با اضافه کردن ویژگی انعطاف به جای .card اصلاح نمایید.
.card {
flex: 1 0 40%;
}
تا دا! کارت های ما در حال حاضر با استفاده از شگفتی های Flexbox بدون وجود ساختار نا خواسته نشانه گذاری لیست عمل می کنند.
به عنوان یک یادداشت جانبی شما ممکن است بخواهید بدانید که چرا ارزش انعطاف پذیری در 40٪ تنظیم شده است. این کار به این علت است که کلاس .card دارای یک حاشیه است که در محاسبه پهنای باند آن گونه که انتظار می رود هنگام استفاده از اندازه – باکس: border-box وجود ندارد. برای کار در این موضوع، ما فقط نیاز داریم تا انعطاف پذیری را به اندازه کافی بالا تنظیم کنیم تا بسته بندی را در نقطه ضروری بچرخانیم و Flexbox فضای باقیمانده را به صورت خودکار پر می کند.
بررسی پرس و جوهای ویژگی
اگرچه محتویات display: دقیقا همان چیزی است که ما نیاز داریم، اما هنوز تنها یک پیش نویس کار با W3C است. و در پشتیبانی از کروم تنها در نسخه 65 که در مارس 2018 منتشر شده، قابل اجرا است. جالب است بدانید که فایرفاکس از آوریل 2015 این موضوع را پشتیبانی کرده است!
اگر استایل را در DevTools غیرفعال کنید، خواهید دید که هنگامی محتویات display: استفاده نشده است، تغییرات ما باعث بهم خوردن طرح شده است. بنابراین درباره این موضوع چه کاری میتوانیم انجام دهیم؟ زمان معرفی ویژگی بعدی است – نمایش مشخصات.
این کار درست مثل پرس و جوهای رسانه ای است اما به شما اجازه می دهد از مرورگر – با استفاده از CSS به تنهایی – درخواست کنید اگر یک ویژگی و ارزش پشتیبانی شده باشد. در صورت پشتیبانی این دو عامل، سبک های موجود در داخل کووری اعمال خواهد شد. اکنون، اجازه دهید صفحه نمایش خود از سبک های محتوا به یک کووری ویژگی تغییر دهیم.
@supports (display: contents) {.feed ul,.feed li { display: contents;}.card { flex: 1 0 40%;}}
استفاده از “not” برای نتیجه واضح تر در CSS
به طور معمول در این نوع سناریو ارتقا پیشرفته ما ازکوواری برای اضافه کردن سبک های جدید استفاده می کنیم، اما این کار همچنین نیاز به غیر فعال سازی برخی از استایل های اوریجینال برای پشتیبان گیری از طرح است.
با این حال شما ممکن است از آنجا که پشتیبانی از نمایش داده ها بسیار خوب است (اگر IE را نادیده بگیرید)، تصمیم بگیرید از ویژگی کوواری استفاده کنید نه اپراتور. این کار همان طور که انتظار داشتید پیش خواهد رفت، بنابراین ما می توانیم ویژگی اصلی انعطاف پذیری خود را به لیست موارد در زمانی که مطالب نمایش: پشتیبانی نمی شود، اضافه کنیم:
@supports not (display: contents) {.feed li { flex: 1 0 50%;}}
در داخل not query می توانیم برخی از سبک ها را اضافه کنیم به طوری که آیتم های .nested اساسا دوباره با استفاده از محتویات display: نمایش داده می شود.
feed li.nested {
flex-basis: 100%;
}
.feed li.nested ul {
display: flex; flex-wrap: wrap;}
یک گام به جلو
شما در حال حاضر می توانید پتانسیل ویژگی های کوواری را مشاهده کنید، اما موضوع جالب این است که شما می توانید عبارات را با استفاده از سه اپراتور در دسترس ترکیب کنید: and, or and not. شاید ما همچنین می توانیم برای پشتیبانی از display: flex و پس از آن یک جایگزین float-based استفاده کنیم.
ما نمی خواهیم این کار را در اینجا انجام دهیم، اما اگر این روش را انتخاب کنبد، در اولین گام دو ویژگی را به صورت زیر تغییر دهید:
@supports (display: flex) and (display: contents) {
…
}
@supports (display: flex) and (not (display: contents)) {
…
}
به عنوان یک امتیاز شما همچنین می توانید برای پشتیبانی از ویژگی های سفارشی مانند این عمل کنید:
@supports (–foo: green) {
…
}
یک جعبه گفتگو اضافه کنید
خب حالا ما یک خبرنامه زیبا در محل مورد نظر خود داریم. بیایید یک جعبه چت کوچک که در سمت راست و پایین صفحه قرار دارد، ضافه کنیم. ما به یک لیست از پیام ها و یک فیلد متنی برای کاربر برای ورود پیام شان نیاز داریم. این بلاک را درست بعد از باز شدن برچسب <body> اضافه کنید:
<div class=”chat”> <div class=”messages”> <ul><li><div class=”message”>Message 1</div></li><li><div class=”message”>Message 2</div></li><li><div class=”message”>Message 3</div></li><li><div class=”message”>Message 4</div></li><li><div class=”message”>Message 5</div></li><li><div class=”message”>Message 6</div></li><li><div class=”message”>Message 7</div></li><li><div class=”message”>Message 8</div></li><li><div class=”message”>Message 9</div></li><li><div class=”message”>Message 10</div></li> </ul> </div> <input type=”text” class=”input”></div>
استایل جعبه چت را در CSS تغییر دهید
زمان اضافه کردن سریع برخی از استایل خای موجود قرا رسیده است.
.chat { background: #fff; border: 10px solid #000; bottom: 0; font-size: 10px; position: fixed; right: 0; width: 300px; z-index: 10;}.messages { border-bottom: 5px solid #000; overflow: auto; padding: 10px; max-height: 300px;}.message { background: #000; border-radius: 5px; color: #fff; margin: 0 20% 10px 0; padding: 10px;}.messages li:last-child .message { margin-bottom: 0;}.input { border: none; display: block; padding: 10px; width: 100%;}
09. آگهی حرکت اسکرول
امیدوارم اکنون یک جعبه چت کمی با یک لیست رونده از پیام های نشسته در بالای خبرنامه خود داشته باشید. اما آیا متوجه شدید چه اتفاقی می افتد زمانی که در ناحیه nested حرکت می کنید و به انتهای محدوده رونده ی آن می رسیم؟ آن را امتحان کنید .تمام مسیر را تا پایان پیام ها به پایین بروید و خواهید دید که صفحه شما به طور خود به خود به پایین حرکت می کند.به این عمل حرکت اسکرول گفته می شود.
حرکت اسکرول در نمونه ما یک مشکل بزرگ نیست، اما در بعضی موارد ممکن است مشکل ساز شود. ما مجبور بودیم این ویژگی را قبل از ایجاد زمینه های رونده در داخل Modals یا منوهای زمینه انجام دهیم.
ساده ترین میانبر این است که <body> را برای سرریز شدن تنظیم کنید: مخفی، اما یک ویژگی خوب و شفاف جدید CSS وجود دارد که همه اینها را رفع می کند و یک راه حل بسیار ساده است. به overscroll-behavior خوشامد بگویید. سه مقدار ممکن وجود دارد:
خودکار – پیش فرض، که اجازه می دهد تا زنجیره اسکرول حاوی – زنجیره اسکرول را غیر فعال می کند
هیچکدام – زنجیره اسکرول و سایر آن را غیرفعال می کند (مثلا بکارگیری rubberbread)
ما می توانیم از overscroll-behavior کوتاه شده استفاده کنیم یا می توانیم یک جهت خاص به آن بدهیم مانند overscroll-behavior x (یا -y) هدف قرار دهیم. بیایید آن را به .messages class: ارسال کنیم:
.messages {
…overscroll-behavior-y: contain;
… }
حالا دوباره به پایین صفحه بروید و بعد از رسیدن به انتهای محتوا، مشاهده خواهید کرد که دیگر مشکل قبلی را نخواهید داشت.
این ویژگی همچنین اگر شما می خواهید ویژگی Pull-to-Refresh را در PWA خود اجرا کنید، و برای تازه کردن خبرخوان خود از آن استفاده کنید، بسیار مفید است. برخی از مرورگرها مانند Chrome for Android به طور خودکار برنامه خود را اضافه می کنند و تاکنون هیچ راه آسانی برای غیر فعال کردن آن بدون استفاده از JS برای لغو رویدادهای استفاده از دسته های performance-impacting non-passiveوجود ندارد.
حالا شما فقط نیاز به اضافه کردن overscroll-behavior: contain به عنصر viewport <body> یا <html> دارید.
شایان ذکر است که این ویژگی یک استاندارد W3C نیست، بلکه یک پیشنهاد از سوی گروه انجمن وب انکوباتور (WICG) است. پیشنهادهای محبوب، پایدار و سالم WICG برای مهاجرت به یک گروه کاری W3C در مرحله بعد درنظر گرفته می شود.
وقتی که جعبه گپ در حال استفاده نیست، آن را در حالت کشویی ببندید.
در حال حاضر، جعبه چت یک فضای بسیار کوچکی را به وجود می آورد، اما در برخی موارد همین جعبه کوچک می تواند باعث ایجاد مزاحمت برای کاربر شود. خوشبختانه ما می توانیم این مشکل را نیز با استفاده از یک جادوی CSS حل نماییم.
اما اول از همه ما باید سبک های موجود خود را کمی تغییر دهیم. به طور پیشفرض ما می خواهیم جعبه گپ بسته شود، بنابراین ما باید مقدار حداکثر ارتفاع را در کلاس .Messages کاهش دهیم. همچنین ما می توانیم یک انتقال به max-height property: اضافه کنیم:
.messages {
…
max-height: 25px;
transition: max-height 500ms; }
هنگامی که به جعبه گپ نیاز دارید، آن را باز کنید
بنابراین جعبه چت ما در حال حاضر بسته و غیر قابل استفاده است. چگونه می توانیم آن را تنها با استفاده از CSS باز کنیم؟ زمان معرفی یک ویژگی جدید فرا رسیده است – فFocus Container pseudo-class :focus-within.
این ویژگی نیز درست مثل :focus pseudo-class selector قدیمی است، اما اگر بر هر کدام از زیرمجموعه های عناصر تمرکز داشته باشید، مطابقت خواهد داشت. این کار روش جالبی است زیرا کاملا برعکس روشی است که CSS معمولا کار می کند، جایی که شما فقط می توانید عناصر را بر اساس زیر مجموعه خود انتخاب کنید. این روش برخی از پتانسیل های جالب را باز می کند.
اضافه کردن این کلاس حداکثر ارتفاع عنصر .messages را به 300px تنظیم می کند، به طوری که هر چیزی در داخل منطقه .chat فوکوس دریافت می کند. به خاطر داشته باشید که عنصر باید به منظور دریافت فوکوس، رویدادهای صفحه کلید یا ماوس یا سایر فرمهای ورودی داده را قبول کند. با کلیک روی <ورودی> این کار انجام خواهد شد.
.chat:focus-within .messages {
max-height: 300px; }
تمرکز را روی CSS بیشتر کنید
این کار خوبی است، اما چه چیز دیگری می توانیم انجام دهیم؟ وقتی که روی جعبه چت تمرکز می کنید، چطور است که خبرخوان را تا کنیم؟ خوب با کمک ترکیب کننده بعدی (~) ما می توانیم این کار را به آسانی انجام دهیم زیرا علامت گذاری برای جعبه گپ قبل از نشانه گذاری خبرخوان است:
.chat:focus-within ~ .container {
filter: blur(5px); }
این همه کاریست که باید انجام دهید! ما می توانیم اثر تصویر را کمی با اضافه کردن یک گذار در فیلتر کلاس اصلی .container کم کنیم. حالا ما پیشنهاد نمی دهیم که این کار یک ایده خوب است، اما ما فکر می کنیم بسیار جالب است که ما می توانیم این کار را با CSS انجام دهیم.
کاوش placeholder-shown
شبه کلاس های جدیدی درCSS Selectors Module که در بخش 4 توضیح داده شده است وجود دارد. یکی دیگر از موارد جالب این است که: placeholder-shown نشان داده شده با هر ورودی که متن placeholderرا نشان می دهد، مطابقت دارد. در حال حاضر حوزه متن ما هیچ متن placeholder ندارد، بنابراین اجازه دهید تعدادی را اضافه کنیم.
<input type=”text” class=”input” placeholder=”Enter your message”>
و سپس بلافاصله بعد از فیلد متن یک پیام کمکی برای نشان دادن کاربر اضافه کنید.
<div class=”prompt”>Press enter to send</div>
حالا پیام کمکی خود را طراحی کنید، به طوری که به طور پیش فرض بسته نباشد.
.prompt {
line-height: 2em;
max-height: 0;
overflow: hidden;
padding: 0 10px;
text-align: right;
transition: max-height 500ms; }
prompt را با CSS قابل مشاهده کنید
در حال حاضر prompt قابل مشاهده نیست، پس چگونه می توانیم از :placeholder-shown در اینجا استفاده کنیم ؟ خب (بیشتر) مرورگرها، متن placeholder را نمایش می دهند تا فیلد دارای یک مقدار باشد. صرفا تنظیم تمرکز placeholder را مخفی نخواهد کرد. این کار مفید است چرا که ما نمی خواهیم کاربر پیام خالی را ارسال کند، بنابراین ما می توانیم از این ویژگی برای نشان دادن اعلان ها در زمانی که کاربر یک مقدار را وارد کرده است، بسط دهیم.
البته در دنیای واقعی ما نیاز به اعتبار داریم. ما می توانیم از تقلید شبه کلاس استفاده کنیم و معنای :placeholder-shown را برجسته نکنیم و prompt را هر زمان که متن placeholder در معرض نمایش نسیت، نشان دهیم (به عنوان مثال فیلد حاوی یک مقدار است).
.input:not(:placeholder-shown) + .prompt {
max-height: 2em; }
تنظیم حداکثر ارتفاع برای اندازه قلم دوبل 10px، با استفاده از 2em، بلوک را گسترش می دهد و متن قابل مشاهده می شود. انتظار می رود برخی از کاربردهای هوشمندانه برای این شبه کلاس ظاهرا جهانی را مشاهده کنیم اگر آن را به مشخصات نهایی برسانید.
همه را به زندگی برسانید
ما با استفاده از برخی از خواص جدید CSS، اسکلت یک خبرخوان را که دارای امکان چت نیز می باشد، ساخته ایم، اما در حال حاضر بی روح است – شما در واقع نمی توانید کاری کنید. یکی از ویژگی های جالب و جدید، CSS Containment است، اما بدون اصلاح DOM، نسخه ی دمو آن دشوار است. بیایید ازبرخی از روش های بسیار ساده JS برای اضافه کردن پیام ها به جعبه چت خود استفاده کنیم.
اول از همه ما باید ID را به <input> و پیام <ul> اضافه کنیم. ما همچنین می توانیم یک ویژگی مورد نیاز را برای ورودی نیز اضافه کنیم.
<ul id=”messages” …
<input type=”text” id=”input” required …
سپس یک فایل JS خالی با نام script.js ایجاد کنید و آن را به صفحه قبل از تگ </ body> اضافه کنید تا ما منتظر آماده شدن DOM نباشیم.
<script src=”script.js”></script>
</body>
یک جاذبه ی جاوا اسکریپت با CSS اضافه کنید
ما باید یک پردازنده رویداد را به <input> اضافه می کنیم، که لیست آن با فشار دادن کلید Enter باز می شود و فیلد را تایید می کند، و مقدار را (اگر معتبر باشد) می گیرد و آن را به انتهای لیست پیام اضافه می کند، میدان را حذف می کند و پیام ها را به پایین می کشد. چیزی شبیه به این کار برای نسخه ی نمایشی ما انجام خواهد شد، اما از این روش در تولید استفاده نکنید!
// Finds the important elements
const input = document.getElementById(‘input’);
const messages = document.getElementById(‘messages’);
// Listens for keypress events on the input
input.addEventListener(‘keypress’, (event) => {
// Checks if the key pressed was ENTER
if (event.keyCode === 13) {
// Checks the field is valid
if (input.validity.valid) {
// Creates a DOM element using the value
const message = createMessage(input.value);
// Appends the new message to the list
messages.appendChild(message);
// Clears the field
input.value = ‘’;
// Scrolls the messages to the bottom
messages.parentNode.scrollTop = messages.parentNode.scrollHeight;
}
}
});
// Converts value to string of HTML
function createMessage (value) {
// Warning: Don’t do this in production without sanitizing the string first!
return stringToDom(`<li><div class=”message”>${value}</div></li>`)
}
// Converts string to real DOM
function stringToDom (string) {
const template = document.createElement(‘template’);
template.innerHTML = string.trim();
return template.content.firstChild; }
حالا وقتی که در فیلد تایپ می کنید و دکمه Enter را فشار می دهید پیام خود را در پایین لیست اضافه می کنید.
اطلاعات اضافی اضافه کنید
برای نشان دادن یکی از مزایای جدید CSS ، باید کار جدیدی را انجام داد. ما در حال پیاده سازی یک ویژگی هستیم که زمان ارسال یک پیام جدید را در کادر در بالای لیست پیام ها نشان می دهد. این کادر زمانی ظاهر می شود که ماوس خود را روی یک پیام قرار دهید.
ابتدا ما باید این اطلاعات را به پیام های جدیدمان اضافه کنیم. ما می توانیم خط بازگشت تابع createMessage را برای اضافه کردن زمان فعلی به یک ویژگی تغییر دهیم.
return stringToDom(`
<li>
<div class=”message message–mine” data-timestamp=”${new Date().toString()}”>
${value}
</div>
</li>
`);
ممکن است متوجه شوید پیام های جدید یک پیام کلاس اضافی دارند –mine. بیایید یک کلاس سریع اضافه کنیم تا آنها به سمت راست لیست بیفتند و هماهنگ شوند.
.message–mine {
background: #ff2089;
margin-left: 20%;
margin-right: 0;
}
نشانگر زمان را با CSS نمایش دهید
بنابراین هدف ما این است که زمان بندی پیام را در بالای لیست پیام ها نشان بدهیم، اما ما باید کاری انجام دهیم تا این امر همیشه قابل مشاهده باشد حتی زمانی که فهرست انتخاب شده باشد. ابتدا اجازه دهید سعی کنیم ارزش را با استفاده از یک شبه عنصر رندر کنیم. ما فقط می خواهیم این کار را برای پیام هایمان انجام دهیم. طبق اصول زیر عمل کنید
.message–mine::after {
content: attr(data-timestamp);
}
این کار باید نشانگر زمانی داخل پیام را نمایش دهد. بیایید کمی آن را اصلاح کنیم تا فقط به صورت :hover به نظر برسد و دارای یک ظاهر طراحی شده که در بالای قسمت پیام ها ثابت شده است، باشد بنابراین حتی زمانی که می چرخد، قابل مشاهده است.
.message–mine:hover::after {
background: #000;
color: #ff2089;
content: attr(data-timestamp);
left: 0;
padding: 5px;
position: fixed;
top: 0;
width: 100%;
}
هوم، این مراحل کار شما را راه می اندازد، اما در به جای منطقه قابل چرخش، در بالای صفحه ظاهر می شود. بیایید موقعیت را: نسبت به جعبه پیام ها اضافه کنیم، تا آن را داشته باشد.
.messages {
…
position: relative;
…
}
آه، این کار هم کمک کننده نبود، چرا که موقعیت ثابت به نمایشگر متصل است، نه به زیرمجموعه آن. زمان معرفی ویژگی بعدی ما فرا رسیده است.
کاوش آگهی محتوا
CSS Containment یک گزاره جدید هیجان انگیز است. این برنامه گزینه های متعددی را به شما می دهد که توانایی محدود کردن ظاهر طراحی، طرح و رنگ را به یک عنصر خاص محدود می کند. این برنامه در هنگام تغییر DOM سودمند است. بعضی تغییرات – حتی کوچکترینها – نیاز به مرورگر برای طراحی مجدد یا بازنویسی کل صفحه دارند، که البته میتواند یک عمل گرانقیمت باشد، حتی اگر مرورگرها کار سختی را برای بهینه سازی این کار برای ما انجام دهند.
با استفاده از CSS Containment ما می توانیم بخش هایی از صفحه را به عنوان حلقه ای از حصار بسازیم و بگوئیم «آنچه در اینجا اتفاق می افتد، اینجا باقی می ماند». این نیز راه دیگری را به کار می گیرد و عنصر محصور شده می تواند از تغییرات ساخته شده در خارج محافظت شود.
چهار مقدار برای هر یک از اهداف متفاوت وجود دارد. شما می توانید آنها را به همان صورت که نیاز دارید ترکیب کنید.
طرح بندی – عنصر حاوی مقاصد طرح کاملا مات است؛ هیچ چیز خارجی نمی تواند روی طرح داخلی آن تأثیر بگذارد و بالعکس
رنگ – زیرمجموعه های عنصر حاوی آن را در خارج از محدوده خود نشان نمی دهد
سبک – برخی از خواص از عنصر حاوی فرار نیست (به نظر می رسد encapsulation خود را با سایه DOM دریافت کنید، اما این گونه نیست)
اندازه – عنصر حاوی می تواند بدون استفاده از اندازه زیرمجموعه خود گذاشته شود
همچنین شما می توانید یکی از دو کلمه کلیدی را به عنوان یک نوع اصطلاح کوتاه استفاده کنید:
سخت است نام مستعار برای ‘طرح رنگ اندازه سبک’محتوا یک نام مستعار برای سبک رنگ طرح انتخاب کنید
هر کدام از این مقادیر کمی مبهم هستند، بنابراین توصیه میکنم برای دیدن آنچه که در واقع اتفاق می افتد این مشخصات را در DevTools باز کنید.
دو ارزش مهم، طرح و رنگ هستند، زیرا آنها در هنگام برنامه نویسی پیچیده ای که نیاز به دستکاری زیادی از DOM دارند، فرصت های بهینه سازی عملکرد را ارائه می دهند. در نسخه ی اولیه ی ما، ما می توانیم یکی از عواقب استفاده از محتوای حاوی اهرم رنگ برای کمک به ما در موقعیت موقتی را داشته باشیم .
با توجه به مشخصات، هنگام استفاده از رنگ “عنصر به عنوان یک بلوک حاوی برای زیر مجموعخ های کاملا ثابت عمل می کند”. این امر بدان معناست که ما می توانیم کاری کنیم که مجموعه رنگ را در کلاس . chat شامل شود: و بر اساس کارت viewport موقعیت ثابت داشته باشد. شما می توانید با استفاده از تبدیل، همان اثر را دریافت کنید
.chat {
…
contain: paint;
… }
آن را با CSS بپوشانید
این ویژگی، آخرین مورد از ویژگی های جدید CSS است. اکثر آنها بسیار ساده هستند، هرچند ما قطعا توصیه می کنیم به جزئیات بیشتر در CSS Containment اشاره کنیم. ما فقط در بخش کوچکی از آن در اینجا قرار گرفته ایم و این نوع ویژگی است که به نظر می رسد چیزی است که واقعا نمی کند – کپسوله سازی یک ظاهر طراحی شده. گفته می شود که این امر می تواند بسیار مفید باشد، و در حال حاضر در مرحله پیشنهادات کاندید شده است، بنابراین به نظر می رسد ارزش زیادی دارد.
هیچ دیدگاهی برای این نوشته ثبت نشده است.