Şunları bilmeniz gerekir:
@scope
css kuralıyla bir bileşen içinde belirli stiller bildirin.- Yeni bir medya özelliği var:
prefers-reduced-transparency
. Geliştirici Araçları, Kaynaklar panelinde iyileştirmeler yaptı.
Daha fazlası da var.
Ben Adriana Jara. Chrome 118'in geliştiricilere yönelik yenilikleri inceleyelim.
CSS @scope
kuralı.
@scope
kuralı, geliştiricilerin stil kurallarını belirli bir kapsam köküne kapsamasına ve öğeleri bu kapsam kökünün yakınlığına göre biçimlendirmesine olanak tanır.
@scope
ile stilleri yakınlığa göre geçersiz kılabilirsiniz. Bu stil, yalnızca kaynak sıralamasına ve belirliliğe bağlı olarak uygulanan olağan CSS stillerinden farklıdır. Aşağıdaki örnekte iki tema bulunmaktadır.
<div class="lightpink-theme">
<a href="#">I'm lightpink!</a>
<div class="pink-theme">
<a href="#">Different pink!</a>
</div>
</div>
kapsam dışında kalan son stil, uygulanan stil bildirilen son stildir.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
Kapsamla, iç içe yerleştirilmiş öğeleriniz olabilir ve geçerli olan stil en yakın üst öğe için geçerli olan stildir.
@scope (.pink-theme) { a { color: hotpink; } } @scope (.lightpink-theme){ a { color: lightpink; } }
Kapsam; sizi uzun, karmaşık sınıf adları yazmaktan kurtarır, daha büyük projeleri yönetmenizi ve adlandırma çakışmalarını önlemenizi kolaylaştırır.
<div class="first-container"> <h1 class="first-container__main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1> </div>
.first-container__main-title { color: grey; } .second-container__main-title { color: mediumturquoise; }
<div class="first-container"> <h1 class="main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="main-title"> I'm the main title, but somewhere else</h1> </div>
@scope(.first-container){ .main-title { color: grey; } } @scope(.second-container){ .main-title { color: mediumturquoise; } }
Kapsam sayesinde, iç içe yerleştirilmiş belirli öğelerin stilini belirlemeden bir bileşenin stilini belirleyebilirsiniz. Bir şekilde, kapsama alınan stilin geçerli olmadığı "delikler" oluşturabilirsiniz.
Aşağıdaki örnekte olduğu gibi metne stil uygulayıp denetimleri hariç tutabilir veya bunun tersini yapabiliriz.
<div class="component">
<div class="purple">
<h1>Drink water</h1>
<p class="purple">hydration is important</p>
</div>
<div class="click-here">
<p>not in scope</p>
<button>click here</button>
</div>
<div class="purple">
<h1 class="purple">Exercise</h1>
<p class="purple">move it move it</p>
</div>
<div class="link-here">
<p>Excluded from scope</p>
<a href="#"> link here </a>
</div>
</div>
@scope (.component) to (.click-here, .link-here) {
div {
color: purple;
text-align: center;
font-family: sans-serif;
}
}
Daha fazla bilgi için Seçicilerinizin erişimini CSS @scope at-rule ile sınırlama makalesine göz atın.
prefers-reduced-transparency
medya özelliği
Medya sorgularını, kullanıcı tercihlerine ve cihaz koşullarına uyum sağlayan kullanıcı deneyimleri sunmak için kullanırız. Bu Chrome sürümü, kullanıcı deneyimini uyarlamak için kullanılabilecek yeni bir değer ekliyor: prefers-reduced-transparency
.
Medya sorgularıyla test edebileceğiniz yeni bir değer olan prefers-reduced-transparency
, geliştiricilerin OS'de daha az şeffaflık sağlamak için web içeriğini kullanıcının seçtiği tercihe göre uyarlamasına olanak tanır (ör. macOS'teki Saydamlığı azalt ayarı). Geçerli seçenekler: reduce
veya no-preference
.
.translucent {
opacity: 0.4;
}
@media (prefers-reduced-transparency) {
.translucent {
opacity: 0.8;
}
}
Aracın nasıl göründüğünü Geliştirici Araçları'ndan da kontrol edebilirsiniz:
Daha fazla bilgi için prefers-reduced-transparency dokümanına göz atın.
Düzeltme: Bu makalenin önceki bir sürümünde, bu sürümde kullanıma sunulan yeni bir scripting
medya özelliğine atıfta bulunuluyordu. 120 sürümünde olacaktır.
Geliştirici Araçları'nda kaynaklar paneli iyileştirmeleri
Geliştirici Araçları, Kaynaklar panelinde şu iyileştirmelere sahiptir: Çalışma alanı özelliği tutarlılığı iyileştirmiştir. En önemlisi de Kaynaklar > Dosya sistemi bölmesinin Çalışma Alanı olarak yeniden adlandırılması ve diğer kullanıcı arayüzü metinleriyle birlikte Kaynaklar > Çalışma Alanı, Geliştirici Araçları'nda yaptığınız değişiklikleri doğrudan kaynak dosyalarınızla senkronize etmenize de olanak tanır.
Ayrıca, artık Kaynaklar panelinin sol tarafındaki bölmeleri sürükleyip bırakarak yeniden sıralayabilirsiniz. Kaynaklar paneli artık şu komut dosyası türlerinde satır içi JavaScript'i düzgün bir şekilde yazdırabilir: module
, importmap
, speculationrules
ve her ikisi de JSON içeren importmap
ve speculationrules
komut dosyası türlerinin söz dizimini vurgulayabilir.
Chrome 118 Geliştirici Araçları güncellemeleri hakkında daha fazla bilgi için Geliştirici Araçları'ndaki Yenilikler sayfasına göz atın.
Diğer ölçütler
Elbette dahası var.
WebUSB API, geliştiricilerin uzantı etkinliklerine yanıt verirken API'yi kullanmasına olanak tanıyan tarayıcı uzantıları tarafından kaydedilen Service Workers'a artık açıktır.
Geliştiricilerin Ödeme İsteği akışlarındaki sorunları azaltmalarına yardımcı olmak için
Payment Request
veSecure Payment Confirmation
uygulamalarındaki kullanıcı etkinleştirme şartını kaldırıyoruz.Chrome'un sürüm döngüsü daha da kısalıyor, kararlı sürümler üç haftada bir kullanıma sunulacak Chrome 119'dan başlayarak üç haftada bir kullanıma sunulacak.
Daha fazla bilgi
Bu bölümde yalnızca bazı önemli noktalar ele alınmıştır. Chrome 118'deki ek değişiklikler için aşağıdaki bağlantıları kontrol edin.
- Chrome Geliştirici Araçları'ndaki yenilikler (118)
- Chrome 118 için kullanımdan kaldırma ve kaldırma işlemleri
- Chrome 118 için ChromeStatus.com güncellemeleri
- Chromium kaynak deposu değişiklik listesi
- Chrome sürüm takvimi
Abone ol
Gelişmelerden haberdar olmak için Chrome Geliştiricileri YouTube kanalına abone olun. Yeni bir video sunduğumuzda e-posta bildirimi alırsınız.
Merhaba Adriana Jara, Chrome 119 yayınlanır yayınlanmaz size Chrome'daki yenilikleri anlatacağım!