Meydan okuma - Uzman projesi
Tüm uzman konularını birleştiren bir tasarım sistemi kurarsın.
Tasarım sistemi: tüm uzman konuları
Bu capstone, uzman seviyesinin tüm konularını tek bir tasarım sisteminde birleştirir. BEM sınıf adları bileşenleri adlandırır; @layer önceliği düzenler. Container query, kartın kabına göre biçimlenmesini; view transition, kart geçişlerini; anchor positioning, açılır panelin konumlanmasını sağlar.
İç içe yazım (&.is-active) bildirimleri yalın tutar; will-change: transform animasyonu hızlandırır. Yedi konu bir araya gelince tutarlı, hızlı ve öngörülebilir bir arayüz doğar.
Uygulama Capstone kart temelini kur
Tasarım sisteminin kart bileşenini kur. @layer components bölümü aç ve içine .card bildirimini yaz: padding: 1rem, container-type: inline-size ve view-transition-name: card. Aynı bölüm içinde .card__title bildirimini de ekle: font-size: clamp(1rem, 4cqi, 1.5rem).
Örnek çözümü göster
/* kart bileşeni */
@layer components {
.card {
padding: 1rem;
container-type: inline-size;
view-transition-name: card;
}
/* kart başlığı */
.card__title {
font-size: clamp(1rem, 4cqi, 1.5rem);
}
}Uygulama Capstone açılır paneli kur
Açılır paneli ekle. .card__button etiketinde anchor-name: --card-btn bildirimi olsun. .card__menu etiketinde position-anchor: --card-btn, position: absolute, top: anchor(bottom), position-try: --flip ve will-change: transform bildirimleri olsun.
Örnek çözümü göster
/* kart düğmesi */
.card__button {
anchor-name: --card-btn;
}
/* kart menüsü */
.card__menu {
position-anchor: --card-btn;
position: absolute;
top: anchor(bottom);
position-try: --flip;
will-change: transform;
}Kendini test et
-
Bir kartın animasyonunu hızlandırmak için hangi bildirim kullanılır?
.card { /* ??? */ animation: cardIn 0.3s ease-out; }- transform: optimize
- will-change: transform
- speed: fast
- animation-speed: high
Cevabı göster
will-change: transform — Doğru. will-change: transform, tarayıcıya transform özelliğinin değişeceğini bildirir; bu, animasyonu daha akıcı yapar.
-
İç içe yazım & seçicisini tamamla
.card { padding: 1rem; ____.is-active { border-color: #6366f1; } }Cevabı göster
.card { padding: 1rem; &.is-active { border-color: #6366f1; } } -
Tasarım sistemi parçalarını eşleştir
- @layer
- Öncelik katmanı
- container-type
- Kaba göre duyarlılık
- view-transition-name
- Geçiş bağı
- anchor-name
- Çapa adı
- will-change
- Animasyon ipucu