ویژگی lang فقط می تواند یک زبان مرتبط با آن داشته باشد. این بدان معناست که ویژگی <html>
فقط می تواند یک زبان داشته باشد، حتی اگر چندین زبان در صفحه وجود داشته باشد. lang
به زبان اصلی صفحه تنظیم کنید.
<html lang="ar,en,fr,pt">...</html>
<html lang="ar">...</html>
پیوندها
مانند دکمه ها، لینک ها در درجه اول نام قابل دسترسی خود را از محتوای متن خود دریافت می کنند. یک ترفند خوب هنگام ایجاد پیوند این است که به جای کلمات پرکننده مانند "اینجا" یا "بیشتر بخوانید"، معنیدارترین متن را در خود پیوند قرار دهید.
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
بررسی کنید که آیا یک انیمیشن طرحبندی را فعال میکند یا خیر
انیمیشنی که یک عنصر را با استفاده از چیزی غیر از transform
حرکت می دهد، احتمالاً کند است. در مثال زیر، من به همان نتیجه بصری متحرک سازی top
و left
و با استفاده از transform
دست یافته ام.
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { top: calc(90vh - 160px); left: calc(90vw - 200px); } }
.box { position: absolute; top: 10px; left: 10px; animation: move 3s ease infinite; } @keyframes move { 50% { transform: translate(calc(90vw - 200px), calc(90vh - 160px)); } }
میتوانید این را در دو مثال Glitch زیر آزمایش کنید و عملکرد را با استفاده از DevTools بررسی کنید.
با همان نشانهگذاری، میتوانیم: padding-top: 56.25%
با aspect-ratio: 16 / 9
جایگزین کنیم، aspect-ratio
به نسبت مشخصی از width
/ height
تنظیم کنیم.
.container { width: 100%; padding-top: 56.25%; }
.container { width: 100%; aspect-ratio: 16 / 9; }
استفاده از aspect-ratio
به جای padding-top
بسیار واضح تر است و خاصیت padding را برای انجام کاری خارج از محدوده معمول آن اصلاح نمی کند.
بله، درست است، من reduce
برای زنجیره ای از وعده ها استفاده می کنم. من خیلی باهوشم اما این کمی کدنویسی هوشمندانه است که بدون آن بهتر است.
با این حال، هنگام تبدیل موارد فوق به یک تابع همگام، وسوسه انگیز است که بیش از حد متوالی پیش بروید:
async function logInOrder(urls) { for (const url of urls) { const response = await fetch(url); console.log(await response.text()); } }
function markHandled(...promises) { Promise.allSettled(promises); } async function logInOrder(urls) { // fetch all the URLs in parallel const textPromises = urls.map(async (url) => { const response = await fetch(url); return response.text(); }); markHandled(...textPromises); // log them in sequence for (const textPromise of textPromises) { console.log(await textPromise); } }
نوشتن خواص سفارشی هودینی
در اینجا مثالی از تنظیم یک ویژگی سفارشی (تفکر کنید: متغیر CSS)، اما اکنون با یک نحو (نوع)، مقدار اولیه (fallback) و بولین وراثت (آیا مقدار را از والد خود به ارث می برد یا نه؟) آورده شده است. روش فعلی برای انجام این کار از طریق CSS.registerProperty()
در جاوا اسکریپت است، اما در Chromium 85 و نسخههای جدیدتر، syntax @property
در فایلهای CSS شما پشتیبانی میشود:
CSS.registerProperty({ name: '--colorPrimary', syntax: '', initialValue: 'magenta', inherits: false });
@property --colorPrimary { syntax: ''; initial-value: magenta; inherits: false; }
اکنون می توانید از طریق var(--colorPrimary)
مانند هر ویژگی سفارشی CSS دیگری به --colorPrimary
دسترسی داشته باشید. با این حال، تفاوت در اینجا این است که --colorPrimary
فقط به عنوان یک رشته خوانده نمی شود. داده دارد!
backdrop-filter
CSS یک یا چند افکت را روی عنصری که شفاف یا شفاف است اعمال می کند. برای درک آن، تصاویر زیر را در نظر بگیرید.
.frosty-glass-pane { backdrop-filter: blur(2px); }
.frosty-glass-pane { opacity: .9; backdrop-filter: blur(2px); }
تصویر سمت چپ نشان میدهد که اگر backdrop-filter
استفاده یا پشتیبانی نشود، چگونه عناصر همپوشانی ارائه میشوند. تصویر سمت راست با استفاده از backdrop-filter
جلوههای تار را اعمال میکند. توجه داشته باشید که علاوه بر backdrop-filter
opacity
استفاده میکند. بدون opacity
، چیزی برای اعمال تاری وجود نخواهد داشت. تقریباً ناگفته نماند که اگر opacity
روی 1
تنظیم شود (کاملاً مات) تأثیری در پسزمینه نخواهد داشت.
با این حال، برخلاف رویداد unload
، استفاده های قانونی برای beforeunload
وجود دارد. به عنوان مثال، هنگامی که می خواهید به کاربر هشدار دهید که تغییرات ذخیره نشده ای دارد، اگر صفحه را ترک کند، از دست خواهند داد. در این مورد، توصیه میشود که فقط زمانی که کاربر تغییرات ذخیرهنشدهای دارد، شنوندگان را beforeunload
اضافه کنید و بلافاصله پس از ذخیره تغییرات ذخیرهنشده، آنها را حذف کنید.
window.addEventListener('beforeunload', (event) => { if (pageHasUnsavedChanges()) { event.preventDefault(); return event.returnValue = 'Are you sure you want to exit?'; } });
function beforeUnloadListener(event) { event.preventDefault(); return event.returnValue = 'Are you sure you want to exit?'; }; // A function that invokes a callback when the page has unsaved changes. onPageHasUnsavedChanges(() => { window.addEventListener('beforeunload', beforeUnloadListener); }); // A function that invokes a callback when the page's unsaved changes are resolved. onAllChangesSaved(() => { window.removeEventListener('beforeunload', beforeUnloadListener); });
استفاده از Cache-Control: no-store
Cache-Control: no-store
یک هدر HTTP است که سرورهای وب میتوانند روی پاسخهایی تنظیم کنند که به مرورگر دستور میدهد پاسخ را در هیچ حافظه پنهان HTTP ذخیره نکند. این باید برای منابع حاوی اطلاعات حساس کاربر، به عنوان مثال صفحاتی که در پشت یک ورود هستند، استفاده شود.
عنصر fieldset
، که شامل هر گروه ورودی ( .fieldset-item
) است، gap: 1px
برای ایجاد مرزهای مویی بین عناصر استفاده می کند. بدون راه حل مرزی مشکل!
.grid { display: grid; gap: 1px; background: var(--bg-surface-1); & > .fieldset-item { background: var(--bg-surface-2); } }
.grid { display: grid; & > .fieldset-item { background: var(--bg-surface-2); &:not(:last-child) { border-bottom: 1px solid var(--bg-surface-1); } } }
بسته بندی توری طبیعی
پیچیدهترین طرحبندی در نهایت طرح ماکرو بود، سیستم چیدمان منطقی بین <main>
و <form>
.
<input type="checkbox" id="text-notifications" name="text-notifications" >
<label for="text-notifications"> <h3>Text Messages</h3> <small>Get notified about all text messages sent to your device</small> </label>
عنصر fieldset
، که شامل هر گروه ورودی ( .fieldset-item
) است، gap: 1px
برای ایجاد مرزهای مویی بین عناصر استفاده می کند. بدون راه حل مرزی مشکل!
.grid { display: grid; gap: 1px; background: var(--bg-surface-1); & > .fieldset-item { background: var(--bg-surface-2); } }
.grid { display: grid; & > .fieldset-item { background: var(--bg-surface-2); &:not(:last-child) { border-bottom: 1px solid var(--bg-surface-1); } } }
طرح بندی برگه ها <header>
طرح بعدی تقریباً یکسان است: من از flex برای ایجاد نظم عمودی استفاده می کنم.
<snap-tabs> <header> <nav></nav> <span class="snap-indicator"></span> </header> <section></section> </snap-tabs>
header { display: flex; flex-direction: column; }
.snap-indicator
باید به صورت افقی همراه با گروه پیوندها حرکت کند و این طرح هدر به تنظیم آن مرحله کمک می کند. هیچ عنصری مطلقاً در اینجا وجود ندارد!
Gentle Flex یک استراتژی واقعی تر است که فقط در مرکز قرار دارد. نرم و ملایم است، زیرا بر خلاف place-content: center
، اندازه جعبه کودکان در حین وسط تغییر نمی کند. تا حد امکان به آرامی، همه آیتم ها روی هم چیده شده، در مرکز قرار می گیرند و فاصله دارند.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- فقط تراز، جهت و توزیع را کنترل می کند
- ویرایش ها و نگهداری همه در یک نقطه هستند
- شکاف فاصله برابر بین n کودک را تضمین می کند
- اکثر خطوط کد
برای چیدمان های ماکرو و میکرو عالی است .
استفاده
gap
هر طول یا درصد CSS را به عنوان مقدار می پذیرد.
.gap-example {
display: grid;
gap: 10px;
gap: 2ch;
gap: 5%;
gap: 1em;
gap: 3vmax;
}
شکاف را می توان 1 طول ارسال کرد که برای سطر و ستون استفاده می شود.
.grid { display: grid; gap: 10px; }
.grid { display: grid; row-gap: 10px; column-gap: 10px; }
شکاف را می توان 2 طول رد کرد که برای سطر و ستون استفاده می شود.
.grid { display: grid; gap: 10px 5%; }
.grid { display: grid; row-gap: 10px; column-gap: 5%; }