lang özelliği yalnızca bir dille ilişkilendirilebilir. Bu, sayfada birden fazla dil olsa bile <html>
özelliğinin yalnızca bir dile sahip olabileceği anlamına gelir. lang
dilini sayfanın birincil diline ayarlayın.
<html lang="ar,en,fr,pt">...</html>Birden fazla dil desteklenmez.
<html lang="ar">...</html>Yalnızca sayfanın birincil dilini ayarlayın. Bu örnekte, dil Arapçadır.
Bağlantılar
Düğmelere benzer şekilde, bağlantılar birincil olarak erişilebilir adlarını metin içeriklerinden alır. Bağlantı oluştururken yararlanabileceğiniz püf noktalarından biri, "Burada" veya "Devamı" gibi dolgu sözcükler yerine en anlamlı metin parçasını bağlantının içine yerleştirmektir.
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Bir animasyonun düzeni tetikleyip tetiklemediğini kontrol etme
transform
dışında bir şey kullanarak öğeleri hareket ettiren animasyonlar büyük olasılıkla yavaş olabilir.
Aşağıdaki örnekte, top
ve left
animasyonlarını kullanıp transform
kullanarak aynı görsel sonucu elde ettim.
.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)); } }
Bunu aşağıdaki iki Glitch örneğinde test edebilir ve Geliştirici Araçları'nı kullanarak performansı inceleyebilirsiniz.
Aynı işaretlemeyi kullanarak şunları değiştirebiliriz: padding-top: 56.25%
değerini aspect-ratio: 16 / 9
ile ayarlayarak aspect-ratio
değerini belirtilen width
/ height
oranına ayarlayın.
.container { width: 100%; padding-top: 56.25%; }
.container { width: 100%; aspect-ratio: 16 / 9; }
padding-top
yerine aspect-ratio
kullanımı çok daha anlaşılırdır ve dolgu özelliğini genel kapsamı dışında bir şey yapacak şekilde elden geçirmez.
Evet, doğru. Bir dizi sözü vermek için reduce
kullanıyorum. çok zekiyim. Ancak bu biraz akıllı kodlama sayesinde işinizi kolaylaştırır.
Ancak, yukarıdakileri eşzamansız bir işleve dönüştürürken çok sıralı seçeneği tercih edebilirsiniz:
async function logInOrder(urls) { for (const url of urls) { const response = await fetch(url); console.log(await response.text()); } }Çok daha düzenli görünüyor ancak ilk getirme işlemim tamamen okunana kadar ikinci getirme işlemim başlamıyor. Bu, getirme işlemlerini paralel olarak gerçekleştiren vaat örneğinden çok daha yavaştır. Neyse ki ideal bir orta yol var.
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); } }Bu örnekte, URL'ler paralel olarak getirilir ve okunur. Ancak "smart"
reduce
biti standart, sıkıcı, okunabilir bir döngü için değiştirilir.
Houdini özel özellikleri yazma
Aşağıda, özel bir özellik (ör. CSS değişkeni) ayarlama örneği verilmiştir. Ancak artık söz dizimi (tür), başlangıç değeri (yedek) ve devralma boole boole'si (değer üst öğesinden mi devralınır?) ayarlanır. Bunu şu anda JavaScript'te CSS.registerProperty()
kullanarak yapabilirsiniz. Ancak Chromium 85 ve sonraki sürümlerde, CSS dosyalarınızda @property
söz dizimi desteklenir:
CSS.registerProperty({ name: '--colorPrimary', syntax: '', initialValue: 'magenta', inherits: false });
@property --colorPrimary { syntax: ''; initial-value: magenta; inherits: false; }
Artık diğer tüm CSS özel mülklerinde olduğu gibi var(--colorPrimary)
üzerinden --colorPrimary
ürününe erişebilirsiniz. Ancak buradaki fark, --colorPrimary
metninin yalnızca bir dize olarak okunmamasıdır. Veri de var!
CSS backdrop-filter
, yarı saydam veya şeffaf bir öğeye bir veya daha fazla efekt uygular. Bunu anlamak için aşağıdaki resimleri inceleyin.
![Daire üzerine yerleştirilmiş üçgen. Daire, üçgenin içinden görülemez.](https://web.developers.google.cn/static/examples/image/admin/LOqxvB3qqVkbZBmxMmKS.png?hl=tr)
.frosty-glass-pane { backdrop-filter: blur(2px); }
![Daire üzerine yerleştirilmiş üçgen. Üçgen yarı saydam olduğu için dairenin içinden görebilirsiniz.](https://web.developers.google.cn/static/examples/image/admin/VbyjpS6Td39E4FudeiVg.png?hl=tr)
.frosty-glass-pane { opacity: .9; backdrop-filter: blur(2px); }
Soldaki resimde, backdrop-filter
kullanılmadığı veya desteklenmediği takdirde çakışan öğelerin nasıl oluşturulacağı gösterilmektedir. Sağdaki resimde, backdrop-filter
kullanarak bulanıklaştırma efekti uygulanıyor. backdrop-filter
ile birlikte opacity
kullanıldığına dikkat edin. opacity
olmadan bulanıklaştırma uygulanmıyordu. opacity
özelliği 1
(tamamen opak) olarak ayarlanırsa arka planda herhangi bir etkisi olmayacağını söylemeye gerek yok.
Bununla birlikte, unload
etkinliğinden farklı olarak beforeunload
için geçerli kullanımlar vardır. Örneğin, kullanıcıyı kaydedilmemiş değişiklikleri olduğu konusunda uyarmak
istediğinizde, kullanıcıyı sayfadan ayrılırsa kaybedecekleri konusunda uyarabilirsiniz. Bu durumda, beforeunload
işleyicileri yalnızca bir kullanıcıda kaydedilmemiş değişiklikler olduğunda eklemeniz ve ardından kaydedilmemiş değişiklikler kaydedildikten hemen sonra bunları kaldırmanız önerilir.
window.addEventListener('beforeunload', (event) => { if (pageHasUnsavedChanges()) { event.preventDefault(); return event.returnValue = 'Are you sure you want to exit?'; } });Yukarıdaki kod, koşulsuz olarak bir
beforeunload
işleyicisi ekler.
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); });Yukarıdaki kod,
beforeunload
işleyicisini yalnızca gerekli olduğunda ekler (ve gerektirmediğinde kaldırır).
Cache-Control: no-store
kullanımını en aza indirin
Cache-Control: no-store
, web sunucularının tarayıcıya yanıtı herhangi bir HTTP önbelleğinde depolamaması talimatını veren yanıtlar üzerinde ayarlanabilen bir HTTP üst bilgisidir. Bu, hassas kullanıcı bilgileri içeren kaynaklar (ör. giriş yapılarak erişilen sayfalar) için kullanılmalıdır.
Her bir giriş grubunu (.fieldset-item
) içeren fieldset
öğesi, öğeler arasında saç çizgisi kenarlıkları oluşturmak için gap: 1px
değerini kullanır. Yanıltıcı bir sınır çözümü yok.
.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); } } }
Doğal ızgara sarmalama
En karmaşık düzen, <main>
ve <form>
arasındaki mantıksal düzen sistemi olan makro düzen oldu.
<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>
Her bir giriş grubunu (.fieldset-item
) içeren fieldset
öğesi, öğeler arasında saç çizgisi kenarlıkları oluşturmak için gap: 1px
değerini kullanır. Yanıltıcı bir sınır çözümü yok.
.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); } } }
Sekmeler <header>
düzeni
Sonraki düzen neredeyse aynıdır: Dikey sıralama oluşturmak için flex özelliğini kullanıyorum.
<snap-tabs> <header> <nav></nav> <span class="snap-indicator"></span> </header> <section></section> </snap-tabs>
header { display: flex; flex-direction: column; }
.snap-indicator
, bağlantı grubuyla yatay olarak hareket etmelidir. Bu başlık düzeni, sahnenin ayarlanmasına yardımcı olur. Burada mutlak konumlandırılmış öğe yok!
Gentle Flex, yalnızca ortalamaya yönelik daha gerçekçi bir stratejidir. Yumuşak ve naziktir çünkü place-content: center
aksine, ortalama sırasında hiçbir çocuk kutusu boyutu değiştirilmez. Tüm öğeler üst üste yığılmış, ortalanmış ve aralıklı olarak mümkün olduğunca nazik davranın.
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- Yalnızca hizalama, yön ve dağıtımı yönetir
- Düzenleme ve bakım işlemlerinin tümü tek bir yerde
- Boşluk, n alt öğe arasında eşit boşluğu garanti eder
- Çoğu kod satırı
Hem makro hem de mikro düzenler için mükemmeldir.
Kullanım
gap
, herhangi bir CSS uzunluğu veya yüzdesini değer olarak kabul eder.
.gap-example {
display: grid;
gap: 10px;
gap: 2ch;
gap: 5%;
gap: 1em;
gap: 3vmax;
}
Boşluk, hem satır hem de sütun için kullanılacak olan 1 uzunlukta iletilebilir.
.grid { display: grid; gap: 10px; }Hem satırları hem de sütunları aynı anda bir araya ayarlama
.grid { display: grid; row-gap: 10px; column-gap: 10px; }
Boşluk, satır ve sütun için kullanılacak olan 2 uzunluk geçirilebilir.
.grid { display: grid; gap: 10px 5%; }Hem satırları hem de sütunları aynı anda ayrı olarak ayarlama
.grid { display: grid; row-gap: 10px; column-gap: 5%; }