En İyi 60+ CSS Mülakat Soruları ve Cevapları (2026)
Emma Davis
CSS mülakatına mı hazırlanıyorsunuz? Temel bilgiler ve daha fazlası hakkındaki bilginizi geliştirmenin zamanı geldi. CSS Röportajı Sorular adayların tasarım yapısını ve stil mantığını ne kadar derinlemesine kavradıklarını ortaya çıkarabilir.
CSS geliştirme alanında bir kariyer, ön uç tasarımından duyarlı web uygulamalarına kadar çeşitli fırsatlara kapı açar. Teknik deneyim, alan uzmanlığı ve güçlü analiz becerileriyle profesyoneller, ekip liderleri ve yöneticilerin değer verdiği gelişmiş becerileri sergileyebilirler. Bu soru ve cevaplar, yeni başlayan, orta düzey ve kıdemli geliştiricilerin mülakatlarda güvenle ve etkili bir şekilde yer almalarına yardımcı olur.
Teknik liderler, yöneticiler ve işe alım uzmanları da dahil olmak üzere 85'ten fazla profesyonelin paylaştığı içgörülerden yararlanan bu kılavuz, sektörler genelinde güvenilir mülakat uygulamalarını derleyerek tüm deneyim seviyeleri için doğruluğu, alakalılığı ve güvenilirliği garanti altına alıyor.
En İyi CSS Mülakat Soruları ve Cevapları
1) Modern CSS basamağını açıklayın; bunlar şunları içerir: @layer, özgüllük ve kaynak sırası.
Basamaklama, birden fazla kural aynı öğeyi hedeflediğinde hangi kuralın "kazanacağına" karar verir. Karar, önem sırasına göre ilerler ( !important ), köken (kullanıcı aracısı, kullanıcı, yazar), ardından katman sırası itibaren @layer, ardından özgüllük ve son olarak kaynak sırası gelir. @layer Sıfırlama, temel, bileşenler ve yardımcı programlar gibi öngörülebilir katmanlar tanımlamanıza olanak tanır; böylece tüm kural grupları, seçici özgüllüğünü artırmadan diğerlerini geçersiz kılabilir. Başlıca avantajı sürdürülebilirliktir; asıl dezavantajı ise yanlış katman sıralamasının hataları gizleyebilmesidir. Düşük özgüllüğe sahip sınıf seçicilerini tercih edin, !important bilinçli politikalar için ve mimariyi okunaklı tutmak için.
Örneklerle cevaplayın
@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }
👉 Ücretsiz PDF İndirme: CSS Mülakat Soruları
2) Konteyner sorguları medya sorgularından nasıl farklıdır ve her birini nerede kullanırsınız?
Konteyner sorguları bir öğenin boyutuna veya stiline yanıt verir içeren eleman, bileşenlerin kendi kendine farkında olmasını ve farklı bağlamlarda yeniden kullanılabilir olmasını sağlar. Medya sorguları, Görünüm, veya cihaz özellikleri ve genel düzen değişiklikleri için parlaklık. Konteyner sorguları, kartların, widget'ların ve iç içe modüllerin yerel olarak uyarlanmasını sağlar; medya sorguları, site genelinde gezinme veya kabuk değişiklikleri için ideal olmaya devam eder. Konteyner sorgularının avantajları arasında daha ince ayrıntı ve daha az genel kesme noktası bulunur; dezavantajları arasında ise container-type ve dikkatli sınır seçimi.
(Karşılaştırma tablosu) arasındaki fark
| faktör | Medya sorguları | Konteyner Sorguları |
|---|---|---|
| Tetik | Görünüm özellikleri | Konteyner boyutu veya stili |
| kapsam | Sayfa çapında | Bileşen yerel |
| Kurmak | Sorgu ötesinde hiçbiri | Gerektirir container-type / isteğe bağlı isim |
| İçin en iyisi | Küresel kesme noktaları | Kart veya widget çeşitleri |
Örneklerle cevaplayın
/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
.card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}
3) Özellikleri ve faydaları nelerdir? :has()ve bununla nasıl karşılaştırılır? :is() ve :where() ?
İlişkisel sözde sınıf :has() bir öğeyi, alt öğelerine veya sonraki desenine göre seçer ve ebeveyn durum stilini etkinleştirmeye olanak tanır JavaKomut dosyası. Bu, form doğrulama grupları, gezinme durumları veya yoğunluk anahtarları için güçlüdür. Buna karşılık, :is() ve :where() uzun seçici listelerini basitleştirin; :where() sıfır özgüllüğe katkıda bulunurken, :is() en spesifik argümanının özgünlüğüne katkıda bulunur. :has() bağlamsal stil ve daha temiz işaretleme içerir; dezavantajları arasında sınırsız seçicilerle kullanıldığında olası performans sorunları sayılabilir. Kapsamını dar tutun ve öngörülebilirlik için sınıflar veya özniteliklerle birleştirin.
Örneklerle cevaplayın
/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }
/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }
/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }
4) Temalama için CSS özel özelliklerini nereye uygularsınız ve bunların avantajları ve dezavantajları nelerdir?
CSS özel özellikleri, değerleri basamaklı olarak taşır, doğal olarak devralır ve çalışma zamanında çözülür; bu da onları temalar, yoğunluk modları ve tasarım belirteçleri için ideal kılar. Varlıkları yeniden oluşturmadan koyu modu açıp kapatmaya veya renk sistemlerini değiştirmeye olanak tanırlar. Avantajları arasında dinamik güncellemeler, bileşenlerle aynı yerde bulunma ve uyumluluk bulunur. @layerDezavantajları arasında statik analizörler için dolaylılık ve yedek çözümler tasarlama gereksinimi yer alır. Genel anlambilim için kök kapsamlı belirteçler, varyantlar için ise bileşen kapsamlı belirteçler kullanın ve uzun vadeli sürdürülebilirliği sağlamak için adları sabit tutun.
Örneklerle cevaplayın
:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
:root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }
5) Hangi yerleşim sistemi hangi probleme uygundur: Flexbox, Grid veya Subgrid?
Flexbox için idealdir tek boyutlu tek bir eksen boyunca hizalama ve dağıtım, Grid'in üstün performansı iki boyutlu Yerleştirme ve açık izleme denetimi, Subgrid ise alt öğelerin iç içe geçmiş bileşenler arasında tutarlı hizalama için üst ızgara izlerini devralmasını sağlar. Doğru sistemi seçmek, geçersiz kılmaları azaltır ve okunabilirliği artırır. Yaygın bir model, sayfa çerçeveleri ve panolar için Grid, araç çubukları ve çip listeleri için Flexbox ve kart meta verileri gibi dahili öğeleri dış sütunlara hizalamak için Subgrid'dir.
Türler ve aralarındaki farklar (karşılaştırma tablosu)
| Kullanım çantası | flexbox'a | Grid | Alt ızgara |
|---|---|---|---|
| Boyut | 1-D | 2-D | Miras alınan izler üzerinden 2 boyutlu |
| Güç | Dağıtım, hizalama | Açık alanlar, tekrarlanabilir parçalar | Bileşenler arası hizalama |
| Kurmak | asgari | Satırları/sütunları tanımla | Ana şebeke gerekli |
| Örnek E-posta | Gezinme çubukları, haplar | Galeri, gösterge panelleri | Kart altbilgileri sayfa ızgarasına hizalandı |
Örneklerle cevaplayın
.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
6) Mantıksal özellikler uluslararasılaşmayı iyileştirir mi? Avantajlarını ve dezavantajlarını açıklayın.
Mantıksal özellikler, sol ve sağ gibi fiziksel yönlerin yerine satır içi ve blok başlangıcı veya sonu gibi akışa bağlı terimleri kullanır. Bu, tek bir stil sayfasının dallanma kuralları olmadan sağdan sola dillere ve dikey yazım modlarına uyum sağlamasını sağlar. Avantajları daha iyi küreselleşme, daha az kural tekrarı ve daha dayanıklı bileşenlerdir. Bunun dezavantajları arasında, benimseme sırasında zihinsel bir değişim ve uzun kuyruklu özelliklerde ara sıra oluşan boşluklar yer alır. margin-inline, padding-block, ve inset-inline-start Yerel ayarlarda tutarlı düzenler elde etmek için aralıklandırma ve konumlandırma.
Örneklerle cevaplayın
.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }
7) Ne zaman kullanırsınız? clamp() ve modern görüntüleme üniteleri ( svh, lvh, dvh ) akışkan türü ve aralığı için?
Kullanım clamp(min, preferred, max) Görüntü alanı büyümesiyle sorunsuz bir şekilde ölçeklenen ancak makul sınırları asla aşmayan değerler istediğinizde. Bu, tipografi, dolgu ve kahraman bölümleri için idealdir. Modern görüntü alanı birimleri, mobil tarayıcı kullanıcı arayüzü Chrome'a hitap ederek tam ekran bölümler için sabit yükseklikler sağlar. Avantajları arasında daha az medya sorgusu, tutarlı ritim ve remDezavantajı ise görsel amacı ve güvenli dokunma hedeflerini doğrulamak için farklı cihazlarda test yapma gerekliliğidir.
Örneklerle cevaplayın
:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }
8) Yığınlama bağlamı nedir ve z-indeksi ve konumlandırma faktörleri bunu nasıl oluşturur veya izole eder?
Yığınlama bağlamı, z-indeks karşılaştırmalarının yalnızca aynı bağlamdaki kardeşler arasında yapıldığı izole bir boyama kapsamıdır. Yeni bağlamlar, kök öğeden, konumlandırılmış öğelerden ortaya çıkar. z-index başka autove bazı özellikler gibi transform, opacity < 1, filter, ve position: fixedBunları anlamak, bir çocuğun bağlamının dışındaki içeriği aşamadığı yaygın "z-indeksinin çalışmaması" sorunlarını açıklar. Avantajı kapsüllemedir; tehlikesi ise, amaçlanan üst üste binmeleri engelleyen kazara izolasyondur.
Örneklerle cevaplayın
.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }
9) Yerel CSS yuvalama üretime hazır mı ve ön işlemcilerden nasıl geçiş yaparsınız?
Yerel iç içe yerleştirme yaygın olarak desteklenir ve seçicileri kısa tutarken kural ilişkilerini bir araya getirerek tekrarı azaltır. Göç, önce bileşenleri önceliklendirmeli, derin alt zincirleri bir veya iki düzeyli iç içe yerleştirmeyle değiştirmeli ve karışımlar gibi yalnızca önişlemciye özgü yapıları kaldırmalıdır. Avantajları arasında daha küçük paketler ve geliştirilmiş DevTools eşlemesi bulunur; dezavantajları arasında ise özgüllüğü artıran ve yeniden kullanımı engelleyen aşırı iç içe yerleştirme eğilimi bulunur. Sınırlar oluşturun: derinliği sınırlayın, sınıf tabanlı kancaları koruyun ve @layer geçersiz kılma sırasını kontrol etmek için.
Örneklerle cevaplayın
.card {
display:grid; gap:.75rem;
& h3 { margin-block:.5rem; }
& .actions { display:flex; gap:.5rem; }
& .actions > button:hover { text-decoration:underline; }
}
10) Konteyner tarzı sorgular kullanabilir misiniz ve bunların pratik faydaları nelerdir?
Stil sorguları, bileşenlerin DOM üzerinden ekstra sınıf adları işlemeden, yoğunluk belirteci veya tema değişkeni gibi kapsayıcılarının hesaplanan stillerine uyum sağlamasını sağlar. Bu, tasarım sistemlerinin kapsayıcı başına kompakt ve konforlu modlar veya açık ve koyu vurgular arasında geçiş yapmasını sağlar. Avantajları, ayrıştırılmış bileşenler ve daha net sınırlardır; dezavantajları ise dikkatli belirteç adlandırma ihtiyacı, belgelenmiş geri dönüşler ve bilinçli kapsayıcı kurulumudur. Bunları, durumu hassas yapısal seçiciler yerine veri olarak ifade etmek için kullanın.
Örneklerle cevaplayın
/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }
/* Child adapts when the container declares compact density */
@container style(--density: compact) {
.item { padding:.5rem; gap:.5rem; }
}
11) CSS için hangi performans faktörleri önemlidir ve düzen bozulmasını nasıl önlersiniz?
CSS performansı, tarayıcının ne sıklıkla yeniden hesaplama yapması gerektiğine bağlıdır stil, hesapla düzenve yeniden boyayın veya bileşik Katmanlar. Düzeni etkileyen özelliklere yapılan iç içe geçmiş okuma ve yazmalar tekrarlanan yeniden akışları zorladığında düzen bozulması meydana gelir. Disiplinli bir yaklaşım, seçici karmaşıklığını en aza indirmek, özgüllüğü düşük tutmak ve yalnızca birleştirici dostu özellikleri canlandırmaktır. Yazmalardan önce toplu DOM okumaları yapın ve patlama yarıçapını sınırlamak için sınırlamayı kullanın.
Örneklerle cevaplayın
- tercih ederim
transformveopacityanimasyonlar için; animasyon yapmaktan kaçınınwidth/height/top/left. - Uygula
content-visibility: autoekran dışı bölümlere ve sağlamakcontain-intrinsic-size. - Kullanım
will-changeYalnızca uzun süreli animasyonlar için katmanları tanıtmak amacıyla seyrek olarak kullanın. - Stil yeniden hesaplamasını azaltmak için derin alt seçicileri tek sınıf kancalarıyla değiştirin.
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }
12) Hangi CSS özellikleri anında erişilebilirliği destekler? Avantajlarını ve örneklerini sunun.
CSS, anlamsal HTML veya ARIA'nın yerini alamaz, ancak anlamsallığı iyileştirir odak görünürlüğü, hareket güvenliği, ve kontrast stratejileri. :focus-visible Sahte sınıf, klavye kipi algılandığında odağı ortaya çıkarır ve fare kullanıcıları için görsel gürültüyü önlerken klavye kullanıcıları için ipuçlarını korur. Medya özellikleri: prefers-reduced-motion Saygılı geri dönüş desenlerine izin verirken, dikkatli renk belirteci tasarımı yeterli kontrastı destekler. Avantajı, çeşitli kullanıcı tercihlerine uygun kapsayıcı varsayılanlardır; sınırlaması ise anlambilim ve klavye gezinmesinin işaretleme ve betik tarafından sağlanması gerektiğidir.
Örneklerle cevaplayın
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.parallax, .video-bg { animation: none; transition: none; }
}
13) CSS'yi dahil etmenin farklı yolları ve her yaklaşımın avantajları veya dezavantajları.
Her biri önbelleğe almayı, kritik yolu ve sürdürülebilirliği etkileyen farklı özelliklere sahip birden fazla dahil etme stratejisi mevcuttur. Harici stil sayfaları, endişeleri ayrı tutar ve tarayıcı önbelleğinden yararlanır; satır içi <style> HTML ile yüklenmesi gereken kritik kurallar için uygundur; satır içi style="" Nitelikler en yüksek önceliğe sahiptir, ancak yeniden kullanıma zarar verir ve özgüllüğü artırır. Doğru türün seçilmesi, geliştirici ergonomisini korurken yük çoğaltılmasını azaltır.
Avantajlar ve dezavantajlar (karşılaştırma tablosu)
| Yöntem | Avantajlar | Dezavantajlar | Tipik Kullanım |
|---|---|---|---|
| Harici stil sayfası | Tarayıcı önbelleğe alma; sayfalar arasında paylaşılır | Ek HTTP isteği | Küresel tasarım sistemi |
Çizgide <style> |
İsteği ortadan kaldırır; kritik CSS için idealdir | Ölçekte yönetilmesi daha zordur | Sayfanın üst kısmındaki stiller |
Çizgide style="" |
Anında ve en yüksek özgüllük | Tekrar kullanılamaz; gürültülü HTML | Tek seferlik geçersiz kılmalar |
Örneklerle cevaplayın
<link rel="stylesheet" href="/tr/assets/app.css" /> <style>/* minimal critical rules for LCP elements */</style> <div class="btn" style="--danger: #b00020">Delete</div>
14) Arasındaki fark nedir? relative, absolute, fixed, ve sticky Konumlandırma? Kullanım senaryosu rehberliği sağlayın.
Konumlandırma, öğelerin akışa nasıl yerleştirileceğini ve kaydırma ve ata öğelerle nasıl etkileşime gireceğini belirler. relative doğal akışı korur ancak görsel kutuyu dengeler; genellikle bir sabitleme bağlamı oluşturmak için kullanılır. absolute Akıştan bir öğeyi kaldırır, onu en yakın konumlandırılmış ataya göre konumlandırır, bu da duyarlılık pahasına hassasiyet sağlar. fixed Öğeleri, kalıcı çubuklar için ideal olan görünüm alanına sabitler ancak ekran klavyelerini ve güvenli alanları da dikkate almalıdır. sticky Kaydırma eşiklerine bağlı olarak statik ve sabit arasında geçiş yapar, bölüm başlıkları ve sayfa içi dizinler sağlar.
Örneklerle cevaplayın
.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }
15) Sürdürülebilir bir CSS mimarisini (BEM, ITCSS, yardımcı programlar, katmanlar) şekillendiren faktörler nelerdir ve bir bileşen stilinin yaşam döngüsü nedir?
Sürdürülebilir bir mimari denge sağlar özgüllük disiplini, tahmin edilebilir katmanve kararlı adlandırma. BEM açık kancalar sağlar, ITCSS kuralları düşük seviyeli sıfırlamalardan yüksek seviyeli yardımcı programlara sıralar, yardımcı program öncelikli yaklaşımlar kısıtlı ilkel öğelerle yinelemeyi hızlandırır ve @layer Kod tabanında geçersiz kılma sırasını resmileştirir. Bir bileşen yaşam döngüsü genellikle belirteç tanımıyla başlar, temel ve bileşen kurallarına geçer, varyantlar ve durumlar ekler ve değişiklikleri bozan kullanımdan kaldırma politikalarıyla son bulur. Avantajı, ekipler arasında tutarlı davranıştır; bunun karşılığı ise önceden planlama ve yönetişimdir.
Örneklerle cevaplayın
- Jetonlar
:root(aralık, renk, yarıçap). - Yerleştirilen bileşenler
@layer componentstek sınıf seçicilerle. - Netlik için veri nitelikleri veya kapsayıcı stil sorguları aracılığıyla varyantlar.
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }
16) Shadow DOM, CSS kapsamını nasıl etkiler ve parçaları şekillendirmenin farklı yolları nelerdir?
Shadow DOM, işaretleme ve stilleri kapsülleyerek kazara sızıntıları önler ve bileşen kararlılığını sağlar. Yazarlar yüzeyleri kasıtlı olarak açığa çıkarabilirler: ::part() bileşen tarafından dışa aktarılan adlandırılmış parçaları hedeflerken, ::slotted() Yuvalara hafif DOM düğümleri atanan stiller. Avantajları arasında sağlam kapsülleme ve öngörülebilir tema yüzeyleri bulunur; dezavantajları arasında ise bileşen tasarımcısı parçaları sağlamadığı sürece iç bileşenlere sınırlı erişim ve bu parçaları tüketiciler için belgeleme gereksinimi yer alır.
Örneklerle cevaplayın
/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }
17) CSS kutu modelinin özellikleri nelerdir ve neden? box-sizing: border-box matter?
Kutu modeli, bir öğenin toplam boyutunun nasıl türetildiğini açıklar içerik, dolgu, kenarlık, ve kenarVarsayılan olarak content-box, beyan width taşma sürprizlerine ve karmaşık hesaplamalara neden olabilecek dolgu ve kenarlıkları hariç tutar. border-box Belirtilen genişlik ve yükseklik içinde dolgu ve kenarlık ekleyerek, ızgara matematiğini ve bileşen boyutlandırmasını daha öngörülebilir hale getirir. Avantajı, daha basit zihinsel modeller ve daha az düzen hatasıdır; dezavantajı ise, bir sistem içinde modelleri karıştırmanın katkıda bulunanları şaşırtabilmesidir. Kökten standartlaştırın ve istisnaları açıkça belgelendirin.
Örneklerle cevaplayın
*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }
18) Nerede kullanırsınız? @supports İlerici gelişim için ne gibi faydaları vardır?
@supports CSS'de özellik algılamayı etkinleştirir ve bir temel çizginin, mümkün olan her yerde koşullu geliştirmelerle çalışmasına olanak tanır. Bu model, kapsayıcı sorgular gibi modern özellikleri benimserken riski azaltır. :has()veya alt ızgara. Başlıca avantajları, zarif bozulma ve daha net geçiş yollarıdır; dezavantajları arasında bir süre çift kod yollarının korunması yer alır. Önce temel davranışı yapılandırın, ardından gelişmiş davranışı hedeflenen davranışın içine sarın. @supports Eski ortamların gerilemesini önlemek için bloklar.
Örneklerle cevaplayın
.card { display: block; }
@supports (display: grid) {
.card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}
19) Hangi CSS birimlerini seçmelisiniz ve aralarındaki farklar nelerdir?
Birim seçimi ölçeklemeyi, okunabilirliği ve erişilebilirliği etkiler. rem kök yazı tipi boyutuyla ölçeklenir, bu da onu küresel yazı ve aralıklar için ideal hale getirir; em Mevcut elemanla ölçeklenir, bu bileşenlerin içinde kullanışlıdır ancak beklenmedik şekilde birleşebilir. ch “0” glifinin genişliğini yansıtır ve ölçüm (çizgi uzunluğu) için mükemmeldir. px cihaz piksel hizalı ve saç çizgileri için güvenlidir ancak kullanıcı tercihlerine yanıt vermez. lh ve rlh Tipografik ızgaraya boşluk bağlayarak dikey ritmi korumaya yardımcı olun.
Örneklerle cevaplayın
- Kullanım
max-width: 65chokunabilir paragraflar için. - Küresel aralığı katları olarak ayarlayın
remKullanıcı tercihlerine saygı göstermek. - Kullanım
emYazı tipi boyutuna göre ölçeklenen simge düğmeleri gibi bileşen iç unsurları için.
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }
20) CSS sayaçları yapılandırılmış içeriklere yardımcı olur mu ve avantajları ve dezavantajları nelerdir?
CSS sayaçları, başlıklar, şekiller ve yasal belgeler için değerli olan anlamsal HTML'yi değiştirmeden otomatik numaralandırma sağlar. Avantajları arasında temiz işaretleme ve farklı diller veya bölümler arasında sunum esnekliği bulunur. Dezavantajları ise, numaralandırmanın DOM yapısında yansıtılmayan veya yardımcı teknoloji tarafından duyurulmayan temel bir anlam taşıması durumunda olası erişilebilirlik boşluklarıdır. Altta yatan hiyerarşinin doğru ve gezinilebilir olduğundan emin olurken, sunumsal numaralandırma için sayaçları kullanın.
Örneklerle cevaplayın
article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }
21) CSS ile animasyon ne zaman yapılmalıdır ve performans açısından hangi özellikler en güvenlidir?
Animasyonlar, yeniden düzenleme ve yeniden boyama işlemlerini önleyen, kompozitör dostu özellikler üzerinde çalıştıklarında en dayanıklıdır. CSS, tarayıcının kare zamanlamasını optimize edebildiği bildirimsel, durum odaklı geçişlerde mükemmeldir. En güvenli seçenekler şunlardır: transform ve opacityGenellikle kompozitör iş parçacığında çalışan ve ana iş parçacığı işini en aza indiren . Mikro etkileşimler, gezinme geçişleri ve basit giriş efektleri için CSS kullanın. Düzeni etkileyen özellikleri canlandırmaktan kaçının. width, height, top, ve left çünkü düzen yeniden hesaplamasını tetiklerler. Geometri değişiklikleri önemli olduğunda, dönüşüm tabanlı illüzyonları veya yumuşak eşleştirmeleri göz önünde bulundurun. max-height Taşma yönetimi ve dikkatli erişilebilirlik geri dönüşleri ile geçişler.
Örneklerle cevaplayın
.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
transform: translateY(0);
opacity: 1;
transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.dialog { transition: none; }
}
22) CSS duyarlı görsellere yardımcı olabilir mi ve buna yaklaşmanın farklı yolları nelerdir?
HTML, kendi kendine görüntü seçimine sahiptir srcset ve sizesAncak CSS, dekoratif görseller, arka planların sanat yönetimi ve nesne uyumu açısından önemini korumaktadır. image-set() arka plan görüntüleri için birden fazla çözünürlük sağlamak ve tercih etmek object-fit ve object-position Değiştirilen öğeleri kutularında kontrol etmek için. Kırpma, yoğunluk veya odak noktalarını uyarlamak için bunları kapsayıcı veya medya sorgularıyla birleştirin. Avantajı, işaretleme çoğalması olmadan hassas görsel kontroldür; dezavantajı ise CSS arka plan görsellerinin içsel boyut müzakeresinden yoksun olması ve yardımcı teknolojiler tarafından duyurulmamasıdır, bu nedenle içerik görselleri HTML'de kalmalıdır.
Avantajlar ve dezavantajlar (karşılaştırma tablosu)
| Yaklaşım | özellikleri | Avantajlar | Dezavantajlar | Tipik Kullanım |
|---|---|---|---|---|
HTML srcset/sizes |
İçsel seçilim | Doğru semantik; en iyi performans | İşaretleme değişiklikleri gerektirir | İçerik görselleri |
CSS image-set() |
Arka plan çözünürlük kümeleri | Kesme noktası başına kolay değişim | İçsel boyutlandırma yok | Dekoratif arka planlar |
object-fit / position |
Box kontrol altına alma | Tutarlı kırpma | Arka plan görüntüleri için değil | Küçük resimler, avatarlar |
Örneklerle cevaplayın
.hero {
background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }
23) Bir JavaSenaryosuz karanlık mod mümkün mü ve onu güçlü kılan faktörler nelerdir?
A JavaÖzel özelliklerin, komut dosyası gerektirmeyen karanlık mod ile birleştirilmesiyle mümkündür. prefers-color-scheme medya özelliği ve kullanıcı geçersiz kılmaları için isteğe bağlı bir HTML özniteliği. Kökte anlamsal belirteçleri tanımlayın, bir medya sorgusu içinde koyu varyantlar sağlayın ve [data-theme] Açık kullanıcı tercihlerine veya kurumsal markaya saygı göstermek için geçersiz kılma. Bu yaklaşım, karmaşıklığı en aza indirir, titreşimi azaltır ve kademeli geçişin yetkili kalmasını sağlar. Sınırlama, açık bir geçersiz kılma olmadığında sistem tercihlerine güvenilmesidir. Jetonları belgelendirin, yeterli kontrastı sağlayın ve her iki modda da odak ana hatlarını ve durumlarını test edin.
Örneklerle cevaplayın
:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
24) Derin seçici yuvalama ve yüksek özgüllüğün dezavantajları var mıdır ve düşük özgüllük yaklaşımından hangi faydalar elde edilir?
Derin iç içe yerleştirme ve yüksek özgüllük, stilleri kırılgan, yeniden düzenlemeleri yavaş hale getirir ve istem dışı geçersiz kılma riskini artırır. Bu tür seçiciler, CSS'yi belge yapısına sıkı bir şekilde bağlar ve bu da işaretleme değiştiğinde bakım maliyetlerini artırır. Düşük özgüllük yaklaşımı, tek sınıf kancalarını, düz mimariyi ve @layer Geçersiz kılmaları öngörülebilir bir şekilde yönetmek için sipariş verme. Avantajları arasında daha net sahiplik, daha basit eşleştirme sayesinde daha hızlı işleme ve ekipler arasında daha kolay kompozisyon yer alır. Yuvalama derinliğine sınırlar koyun, gereksiz olduğunda eleman adlarıyla niteleyici sınıflar kullanmaktan kaçının ve kaçış yolları için yardımcı programlar sağlayın.
Örneklerle cevaplayın
/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }
/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }
25) Hangi metodoloji (BEM, ITCSS veya fayda odaklı) farklı ekiplere uygundur ve avantajları ve dezavantajları nelerdir?
Metodoloji seçimi ekip büyüklüğüne, inceleme kültürüne ve ürünün oynaklığına bağlıdır. KUYU büyük ekiplerde ölçeklenebilen açık ve okunabilir kancalar sağlar. ITCSS kod tabanını, nesneler ve bileşenlerden yardımcı programlara kadar düşük seviyeli sıfırlamalardan başlayarak basamaklı yapıya uygun şekilde düzenler. Fayda öncelikli Kısıtlı ilkel öğelerle teslimatı hızlandırır ve özel seçicilere göre kompozisyonu tercih eder. Hibritler yaygındır: sıralama için ITCSS, gerektiğinde adlandırma için BEM ve tek seferlik ayarlamalar için yardımcı programlar. Karşılıklı ödünleşimler arasında ayrıntı (BEM), önceden planlama (ITCSS) ve potansiyel sınıf çoğalması (yardımcılığa öncelik verme) yer alır.
Farklar (karşılaştırma tablosu)
| Yöntem | özellikleri | Avantajlar | Dezavantajlar | En uygun |
|---|---|---|---|---|
| KUYU | .block__elem–mod adlandırma | Öngörülebilir kancalar | Ayrıntılı seçiciler | Büyük ekipler, tasarım sistemleri |
| ITCSS | katmanlı mimari | Geçersiz kılma sırasını temizle | Planlama genel giderleri | Çoklu ekip monorepoları |
| Fayda öncelikli | Atomic sınıfları | Hız, tutarlılık | Sınıf kaybı riski | Hızlı prototipleme, uygulamalar |
26) Tasarımdan koda kadar boşluk ve tipografi simgelerinin yaşam döngüsünü örneklerle açıklayın.
Jeton yaşam döngüsü, ölçek seçimleri, oranlar ve erişilebilirlik hedefleriyle tasarımda başlar. Bunlar, anlamsal özellikleri temsil eden adlandırılmış, sürümlendirilmiş özel özellikler haline gelir. türleri (Örneğin, --space-2, --font-scale-1 ) ham değerler yerine. Jetonlar temel stillere, ardından bileşenlere ve varyantlara akar ve sonunda sistemler geliştikçe kullanımdan kaldırılır veya takma adlar aracılığıyla yönlendirilir. Avantajları arasında tutarlı ritim, daha küçük farklar ve geliştirilmiş platformlar arası eşitlik bulunur; dezavantajları arasında ise ilk yönetim yükü ve net dokümantasyon ihtiyacı yer alır. Jetonları genel API'ler olarak ele alın: aralıkları tanımlayın, kullanım yönergelerine eşleyin ve geçiş notları sağlayın.
Örneklerle cevaplayın
:root{
--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }
/* deprecation alias */
:root{ --space-small: var(--space-2); }
27) Nasıl yapılır :focus-visible, :focus-within, ve :target farklıdır ve her biri ne gibi avantajlar sağlar?
Bu seçiciler farklı etkileşim ve gezinme özelliklerini ele alır. :focus-visible Giriş kipi klavye gezintisini önerdiğinde yalnızca odağı görüntüler, erişilebilirliği desteklerken fare kullanıcıları için dikkat dağıtıcı sesleri azaltır. :focus-within Herhangi bir alt öğe odaklandığında bir kapsayıcıyla eşleşir ve form alanları gibi bileşikler için gruplanmış vurgulamayı etkinleştirir. :target URL parçasının referans verdiği öğeyle eşleşerek, komut dosyası olmadan atlama bağlantılarını ve sayfa içi gezinmeyi destekler. Dikkatlice bir araya getirildiklerinde, yönlendirmeyi iyileştirir, bilişsel yükü azaltır ve verimli klavye iş akışlarını desteklerler.
Örneklerle cevaplayın
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }
28) Avantajları ve dezavantajları nelerdir? content-visibility ve büyük belgelerde CSS sınırlaması?
content-visibility: auto Ekran dışı öğeler için görüntüleme alanına yakın olana kadar işleme işini erteler ve uzun beslemelerde ilk işleme maliyetini önemli ölçüde azaltır. Ek sınırlama ( contain: layout paint style ) bir alt ağacın sayfanın geri kalanı üzerindeki etkisini sınırlar, yeniden akış kapsamını daraltır ve tekrarlanan güncellemeleri hızlandırır. Avantajları arasında iyileştirilmiş yanıt verme hızı ve azaltılmış bellek kullanımı bulunur; dezavantajları arasında ise, iç boyutlar bilinmiyorsa olası anlık etkiler ve karmaşıklık bulunur. JavaBetik boyutları ölçmelidir. Tedarik ederek azaltın contain-intrinsic-size ve sadece gerektiğinde ölçüm yapıyoruz.
Örneklerle cevaplayın
.feed-item{
content-visibility: auto;
contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
contain: layout paint style;
}
29) Minimum kesme noktasıyla duyarlı bir ızgara nasıl oluşturulur? minmax() ve auto-fit/auto-fill?
Esnek rayların maksimum genişliğe kadar genişleyip daha sonra otomatik olarak sarılmasıyla esnek bir düzen elde edilebilir. repeat(auto-fit, minmax(min, 1fr)) Sığacak kadar sütun oluşturur ve garip boşluklardan kaçınmak için boş parçaları daraltır. Bu, ekran boyutları arasında uyumlu yoğunluğu korurken açık kesme noktalarına olan bağımlılığı azaltır. Bu yaklaşım galeriler, kartlar ve ürün listeleri için idealdir. Rahat minimumlar sağlayın (örneğin, 16rem ) ve ritmi korumak için boşluklara güvenin.
Örneklerle cevaplayın
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
30) Ne zaman seçim yapılacağını belirleyen faktörler nelerdir? gap öğeler arasındaki boşluklar için kenar boşlukları mı?
gap Flexbox ve Grid ile doğal olarak çalışan, kenar boşluklarını daraltan kenar durumları olmadan simetrik ayırma uygulayan akışa duyarlı bir aralıktır. bileşen içi boşluk, ilk/son çocuğun hizalamasını etkilemediği veya sağdan sola düzenlerde yön düzeltmeleri gerektirmediği için tercih edilir. dış Bir bileşenin genel API'sinin parçası olan veya aralığın Flex/Grid dışı bağlamlarla etkileşime girmesi gereken aralıklar. Şaşırtıcı çakışmaları önlemek ve geçersiz kılma kurallarını en aza indirmek için kapsam, sahiplik ve düzen semantiğine göre seçim yapın.
Farklar (karşılaştırma tablosu)
| Kriter | gap |
Kenar Boşlukları |
|---|---|---|
| kapsam | Düzen kabına dahili | Kardeşler ve komşular arasındaki dışsal |
| Directionality | Mantıksal ve simetrik | RTL ayarlamaları gerekebilir |
| Çöken davranış | Uygulanamaz | Marjın çökmesine tabi |
| En iyi kullanım | Esnek/Izgara alt aralığı | Bileşen dış aralığı ve düzen sözleşmeleri |
Örneklerle cevaplayın
.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */
31) Güvenmenin dezavantajları nelerdir? !importantve daha güvenli alternatifler nelerdir?
aşırı kullanım !important Basamağın doğal yaşam döngüsünü atlayarak amacı gizler, meşru geçersiz kılmaları engeller ve gelecekteki katkıda bulunanları özgüllüğü daha da artırmaya zorlar. Ayrıca, kurallar sıralama ve @layer stratejiler. Profesyonel alternatif, öngörülebilir geçersiz kılma yolları tasarlamaktır: seçici özgüllüğünü azaltın, politikaları özel bir yardımcı program katmanına yerleştirin veya kaynakları yeniden sıralayın @layer beyanları silahlandırmak yerine. !important Yüksek kontrastlı veya zorunlu görünürlüklü, belgelenmiş bir kaçış kapısı görevi gören kamu hizmetleri gibi kasıtlı kullanıcı odaklı durumlar için.
Örneklerle cevaplayın
/* Deliberate, documented utility only */
@layer utilities {
.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}
/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }
32) Performans veya sürdürülebilirlik açısından hangi tür seçicilerden kaçınılmalıdır ve neden?
Tüm DOM genelinde belge derinliğine veya özniteliklere sıkı sıkıya bağlanan seçiciler risklidir. Uzun alt zincirler, eşleştirme maliyetini artırır ve işaretlemede kırılgan bağımlılıklar yaratır. Geniş öznitelik seçicileri, örneğin: [class*="btn"] or [data-*] Kapsam belirlemeden büyük alt ağaçları tarayabilirsiniz. Aşırı nitelikli seçiciler gibi ul.nav > li > a.link Yeniden kullanılabilirliği azaltır ve geçersiz kılmaları karmaşıklaştırır. Sürdürülebilir bir yaklaşım, tek sınıf kancalarını, net sözleşmelere sahip durum niteliklerini (örneğin, [data-state="open"] ), ve kısa ilişkiler ( > , + ) bileşen sınırları içinde. Bu, okunabilirliği artırır, kademeli çatışmaları azaltır ve yeniden düzenlemeleri hızlandırır.
Örneklerle cevaplayın
/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }
/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }
33) Ne zaman seçmelisiniz? @layer Yardımcı programlar ile bileşen varyantları arasındaki fark nedir ve faydaları nelerdir?
Kamu hizmetleri ekspres tek seferlik ayarlamalar boşluk, görüntüleme veya hizalama gibi, özgüllüğü artırmadan geçersiz kılınması gereken bileşenler. Bileşen varyantları, tekrarlanabilir durumlar veya modlar Bileşen API'sine ait olan yardımcı programlar, uygulama kodunda kompozisyon sırasında öne çıkar çünkü öngörülebilirdirler ve bileşenin stil sayfasının düzenlenmesini gerektirmezler. Aynı durum tekrarlandığında varyantlar daha üstündür ve tasarım sisteminin bir parçası olarak belgelendirilmeli ve test edilmelidir. Dengeli bir mimari, yardımcı programları katman sırasının sonlarına yerleştirir ve bileşen varyantlarının bileşen katmanı içinde düşük özgüllüğünü korur.
Örneklerle cevaplayın
@layer reset, base, components, utilities;
/* Variant: part of the API */
@layer components {
.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}
/* Utility: composition escape hatch */
@layer utilities {
.mt-4 { margin-block-start: 1rem; }
.inline { display:inline; }
}
34) Grid, tüm Flexbox kullanımının yerini alabilir mi, yoksa her ikisini de tutmak için farklılıktan kaynaklanan nedenler var mı?
Grid ve Flexbox ortogonal problemleri çözer. Grid, karmaşık sayfa çerçevelerini, gösterge panellerini ve kart galerilerini basit hale getiren açık iz tanımlarıyla iki boyutlu kontrol sağlar. Flexbox, tek eksenli dağıtım, ana eksen boyunca içsel boyutlandırma ve satırlar veya sütunlar içinde hizalama konusunda mükemmeldir; bu da araç çubukları, menüler ve yongalar için idealdir. Grid'i her yere zorla yerleştirmek ergonomik hizalama davranışını feda ederken, Flexbox'ı makro düzen için zorlamak kırılgan sarmalayıcılar ortaya çıkarır. Olgun sistemler, bazen aynı bileşen içinde her ikisini de kasıtlı olarak birleştirerek, özellikleri probleme uyan motoru seçer.
Farklar (karşılaştırma tablosu)
| Kriter | Grid | flexbox'a |
|---|---|---|
| Boyut | İki boyutlu parçalar | Tek boyutlu akış |
| Güç | Açık alanlar, boşluklar, alt ızgara | Dağıtım, hizalama, yeniden sıralama |
| En iyi kullanımı | Sayfa çerçeveleri, panolar | Araç çubukları, gezinme çubukları, çip listeleri |
Örneklerle cevaplayın
.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }
35) Kullanmanın yararları ve dezavantajları nelerdir? aspect-ratio dolgu hilelerine karşı mı?
aspect-ratio Kartlar, medya ve küçük resimler için şekilleri, sarmalayıcı öğeler veya sözde öğe hileleri olmadan korumak için bildirimsel ve kendi kendini belgeleyen bir yol sunar. Nesne uyumuyla sorunsuz bir şekilde entegre olur ve Grid ve Flex düzenlerinde öngörülebilir bir şekilde çalışır. Başlıca dezavantajları, eski ortamlardaki eski tarayıcı boşlukları ve önceki hile tabanlı CSS'yi yeniden değerlendirme gereksinimidir. Üst dolgu hileleri, çok eski motorlar için bir yedek çözüm olmaya devam eder, ancak DOM karmaşıklığını artırır ve netliği azaltır. Tercih Edin aspect-ratio sürdürülebilirlik için ve onu kapılamak için @supports yalnızca sözleşme gereği eski teminat kapsamının gerekli olması durumunda.
Örneklerle cevaplayın
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
.thumb-wrap { position: relative; }
.thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
.thumb { position:absolute; inset:0; }
}
36) Güvenli alanlara ve mobil görüntüleme alanlarına saygılı, dayanıklı ve yapışkan bir başlık nasıl oluşturursunuz?
Dayanıklı bir başlık dengeleri sağlar position: sticky bölüm düzeyindeki ankrajlar için position: fixed yalnızca tasarım küresel kalıcılık gerektirdiğinde. Güvenli alan ekleri, çentikli cihazlarda sistem kullanıcı arayüzüyle çakışmayı önler ve modern görüntüleme birimleri gibi dvh Tarayıcı Chrome'u gösterdiğinde veya gizlediğinde çökmeyi önleyin. Strateji, net bir yığınlama bağlamı atamayı, düzen kaymalarını önlemek için alan ayırmayı ve giriş efektleri için hareket tercihleri sağlamayı içerir. Sanal klavyeler, kullanılmadıklarında sabit öğeleri kapatabileceğinden, klavyeler arasında ve yatay yönde test yapmak kritik öneme sahiptir.
Örneklerle cevaplayın
.header {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
background: var(--bg);
z-index: 100;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }
Dikkate alınması gereken hususlar (hızlı tablo)
| faktör | Tavsiye |
|---|---|
| Güvenli alanlar | Kullanım env(safe-area-inset-*) |
| Görüntü alanı | tercih ederim dvh tam yükseklikteki bölgeler için |
| Z-endeksi | Bir katman ölçeği oluşturun ve belgelendirin |
37) Bileşenlerde yoğunluk ölçekleme ile boyut ölçekleme arasındaki fark nedir ve her ikisi de ne zaman kullanılmalıdır?
Yoğunluk ölçeklemesi değiştirir aralıklar, boşluklar ve satır yüksekliği yazı tipi boyutlarını sabit tutarak, tipografik hiyerarşiyi değiştirmeden kompakt, rahat veya geniş varyantlar üretebilirsiniz. Boyut ölçekleme, tipografik ölçeğin kendisiBaşlıkları, gövde metnini ve kontrolleri daha büyük veya daha küçük adımlara kaydırarak. Bilgi yoğunluğunun göreve göre değiştiği kurumsal kullanıcı arayüzleri için yoğunluk ölçeklemeyi kullanın; cihaz mesafesine, erişilebilirlik ihtiyaçlarına veya marka gereksinimlerine yanıt vermek için boyut ölçeklemeyi kullanın. Yüzeyler arasında tutarlılığı sağlamak için her ikisini de belgelenmiş aralıklara sahip belirteçler olarak ele alın.
Örneklerle cevaplayın
/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }
38) Küresel çapta yoğun sıfırlamaların hangi dezavantajları ortaya çıkıyor ve daha güvenli alternatifler neler?
Agresif sıfırlamalar, odak ana hatları, liste semantiği ve form kontrol olanakları gibi faydalı varsayılan ayarları istemeden kaldırabilir. Bu durum erişilebilirliğe zarar verir ve yerel davranışların gereksiz yere yeniden uygulanmasını zorunlu kılar. Daha güvenli alternatifler arasında şunlar yer alır: modern normalleştirmeler Anlamsallığı korurken tutarsızlıkları gideren ve kapsamlı sıfırlamalar aracılığıyla uygulandı @layer Gerçekten boş bir sayfa gerektiren bileşenlere. Sıfırlama politikasını belgelendirin, kritik özellikleri açıkça geri yükleyin. :focus-visibleve varsayılanları anlam ifade eden öğeleri sıfırlamaktan kaçının, örneğin b, strong, ve em.
Örneklerle cevaplayın
@layer reset {
*,*::before,*::after { box-sizing: border-box; }
:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */
39) DevTools ve modern CSS özelliklerini kullanarak karmaşık basamak sorunlarını etkili bir şekilde nasıl ayıklayabilirsiniz?
Etkili hata ayıklama, öğeyi DevTools'da izole etmek ve incelemekle başlar. bilgisayarlı Son mülk değerlerini ve kaynaklarını görmek için bölmeyi kullanın. Ardından, Modeller Bir kuralın neden kazandığını anlamak için bölmenin kural sırasını ve özgüllüğünü dikkate alın. @layer düzen ve yeni bir istifleme veya içerme bağlamının müdahale edip etmediği. TogglHipotezleri doğrulamak için kuralları kullanın ve katman önceliğini görselleştirmek için (mümkün olan yerlerde) kademeli katman görünümünü kullanın. Geçici hata ayıklama ana hatları ekleyin ve özellik işaretlerini göz önünde bulundurun. @supports Gelişmiş yolları seçici olarak devre dışı bırakarak sorunları ikiye bölmek.
Örneklerle cevaplayın
/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }
/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}
40) Baskı stilleri ve medya sorguları profesyonel bir CSS kanalında nereye yerleşir ve bunların avantajları ve dezavantajları nelerdir?
Baskı stilleri, dokümantasyon ağırlıklı ürünler, faturalar ve yasal belgeler için vazgeçilmez olmaya devam ediyor. Profesyonel bir süreç, minimum düzeyde @media print Gereksiz kromu kaldıran, okunabilir bir ölçü belirleyen ve renk kullanımının gri tonlamalı cihazlarda okunabilir olmasını sağlayan bölüm. Avantajları arasında iyileştirilmiş arşiv kalitesi ve kullanıcı güveni bulunurken; dezavantajları arasında ek bakım ve normalde etkileşimli olan içeriğin denetlenmesi gerekliliği yer alır. Yazdırma kurallarını belirteç odaklı tutun, üstbilgi ve altbilgiler dışında mutlak konumlandırmadan kaçının ve sayfalama anormalliklerini önlemek için yaygın tarayıcıları ve PDF oluşturucularını test edin.
Örneklerle cevaplayın
@media print {
nav, .ads, .controls { display: none !important; }
article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
a[href]::after { content: " (" attr(href) ")"; }
img { break-inside: avoid; }
}
41) Hangi strateji öngörülebilir bir üst katman sistemi üretir ve bunu nasıl yönetmelisiniz? z-index ölçek?
Öngörülebilir bir katmanlama sistemi, katmanlamayı geçici sayılar yerine belgelenmiş bir sözleşme olarak ele alır. Küçük, adlandırılmış bir ölçek tanımlayın (örneğin, taban, yükseltilmiş, katmanlama, modal, tost) ve bileşenleri değişkenler veya yardımcı sınıflar aracılığıyla katmanlara atayın. Her katmanı yalnızca izolasyon gerektiğinde kendi yığınlama bağlamında tutun ve tesadüfi bağlamlardan kaçının. transform or filter Kasıtlı olmadığı sürece. Başlıca avantajı, mühendislerin deneme yanılma olmadan çatışmalar hakkında akıl yürütebilmeleridir; dezavantajı ise mütevazı bir ön sınıflandırmadır. Ölçeği tasarım belirteçleriyle eşleştirin ve sapmayı önlemek için aralık dışı değerleri ayıklayın.
Kaplama ölçeği (karşılaştırma tablosu)
| aşama | Amaç | Tipik z-index |
notlar |
|---|---|---|---|
| baz | Düzenli içerik | 0 | Yeni bağlamlar yaratmaktan kaçının |
| Yükseltilmiş | Yapışkan başlıklar, çekmeceler | 10-100 | Kabuk içinde tutarlılığı koruyun |
| Kaplama | Arka planlar, antrenmanlar | 900 | Tam sayfa tıklama kalkanı |
| Tipik | Diyaloglar, seçiciler | 1000 | Pozisyon fixed; tuzak odağı |
| Tost | Bildirimler | 1100 | Blokajsız; zamanlı kaldırma |
Örneklerle cevaplayın
:root{
--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }
42) Yerel form kontrolleri sorumlu bir şekilde nasıl biçimlendirilmelidir ve yaygın tekniklerin avantajları ve dezavantajları nelerdir?
Sorumlu form stili, olanakları iyileştirirken anlambilime de saygı gösterir. Klavye ve ekran okuyucu davranışını koruyarak başlayın, ardından katman geliştirmeleri yapın: accent-color kontrolleri değiştirmeden markayla uyumlu olması için kontrol edilebilir girdileri uygulayın; appearance tutarsız kullanıcı arayüzlerini normalleştirmek için tutumlu bir şekilde; ve hedef yükleme kontrolleri aracılığıyla ::file-selector-buttonFayda, minimum düzeyde erişilebilir, tutarlı kontrollerdir. JavaScript; dezavantajları arasında tarayıcılar arası nüanslar ve kontrolleri toptan değiştirme isteği bulunur. Özel geçersiz kılmaları önlemek için odak durumlarını, hata durumlarını ve devre dışı bırakılmış durumları bileşen API'sinin bir parçası olarak belgelendirin.
Örneklerle cevaplayın
/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }
/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }
/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}
43) Kritik CSS ve kod bölme için hangi stratejiler mevcuttur ve bunların avantajları ve dezavantajları nelerdir?
Kritik CSS, katlamanın üstündeki içerik için gereken kuralları satır içi olarak düzenleyerek ve geri kalanını erteleyerek En Büyük İçerikli Boyama'yı iyileştirir. Kod bölme, stil sayfasını rota, özellik veya bileşene göre böler. Ölçülü bir yaklaşım, sürdürülebilirlik için küçük bir kritik dilimi katmanlı harici paketlerle birleştirir. Avantajları daha hızlı algılanan yükleme ve daha küçük başlangıç yükleridir; dezavantajları arasında derleme karmaşıklığı ve derleme zamanında kopyalanmadığı takdirde kopyalanma riski bulunur. Belirleyici katmanlamayı tercih edin ( @layer ) ve geçersiz kılmaların parçalar arasında kararlı kalmasını sağlayan adlandırma kuralları.
Yükleme stratejileri (karşılaştırma tablosu)
| Stratejileri | Faydalar | Dezavantajlar | Tipik Kullanım |
|---|---|---|---|
Satır içi kritik <style> |
Daha hızlı LCP; talep yok | Bakımı daha zor | Katlamanın üstündeki kabuk |
| Asenkron harici CSS | Önbelleğe alınabilir; modüler | Biçimlendirilmemiş içerik riskinin parlaması | Uygulama rotaları |
| Medya bölmeli paketler | Koşullu yükleme | Karmaşıklık; test yükü | Baskı, yüksek dpi, koyu mod |
Örneklerle cevaplayın
<link rel="preload" href="/tr/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/tr/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>
44) Modern CSS renk seçenekleri nelerdir? color-mix, bağıl renk sözdizimi, algısal alanlar) ve ne zaman kullanılmaları gerekir?
Modern CSS, çalışma zamanında renklerin oluşturulmasını destekler color-mix() ve bileşenleri göreli renk sözdizimi aracılığıyla ayarlayarak, ön derleme olmadan dinamik tema oluşturmayı mümkün kılar. OKLCH veya Lab gibi algısal renk uzayları, sRGB'den daha düzgün parlaklık ve renk tonu ayarlamaları sağlayarak, eğimleri ve durumları (gezinme, devre dışı) daha tutarlı hale getirir. Başlıca avantajı, temalar arasında öngörülebilir kontrast ve renk tonu değişimleridir; dezavantajları arasında eski motorlarda kısmi destek ve marka uyumluluğunu doğrulama gereksinimi yer alır. Gezinme veya vurgu durumları için çalışma zamanı karıştırma özelliğini kullanın ve mümkün olduğunda kanonik belirteçleri algısal bir alanda saklayın, gerektiğinde sRGB'ye geri dönün.
Örneklerle cevaplayın
:root{
--brand: oklch(60% .15 260);
--brand-hover: color-mix(in oklch, var(--brand), black 12%);
--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }
45) Hangi teknikler dayanıklı, tepkisel tipografi ve dikey ritim yaratır?
Dayanıklı tipografi, okunabilir satır uzunluğu, ölçeklenebilir boyutlar ve tutarlı aralıklar arasında denge kurar. Kullanıcı tercihlerine uygun bir temel yazı tipi boyutuyla başlayın, ardından clamp() mantıklı sınırlarla sınırlandırılmış akıcı adımları tanımlamak. Dikey ritim oluşturmak lh veya sabit bir kök satır yüksekliği ve paragrafları kısıtlayın ch-temelli önlemler. text-wrap: balance başlıkları daha eşit bir şekilde dağıtarak iyileştirebilirken, hyphens: auto ve dil meta verileri pürüzlü kenarları azaltır. Avantajları, farklı görünüm alanlarında okunabilirlik ve erişilebilirliktir; dezavantajları arasında ise bağları test etme ve marka yazı tipleriyle denge davranışı gereksinimi yer alır.
Örneklerle cevaplayın
:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }
46) Kaydırma yakalama ve kaydırma dolgusu/kenar boşlukları gezinmeyi iyileştirmek için nasıl bir arada kullanılır?
Kaydırma yakalama, dönen resimler ve bölümlü düzenler için kesin dinlenme pozisyonları oluştururken scroll-padding ve scroll-margin hedeflerin yapışkan başlıkların altında doğru şekilde hizalandığından emin olun. scroll-snap-type konteyner üzerinde ve scroll-snap-align Davranışı yönlendirecek öğeler üzerinde. Avantajlar arasında tutarlı his ve geliştirilmiş klavye gezintisi yer alır. tabindex ve çapa noktaları; dezavantajlar, dokunmatik cihazlarda yakalama noktalarının çok agresif olması veya momentum için ayarlanmamış olması durumunda potansiyel hayal kırıklığıdır. Yapışkan kullanıcı arayüzünün altında gizlenen içeriği önlemek için görüntüleme alanının üst kısmına mantıksal dolgu sağlayın ve klavye ve işaretçi etkileşimleriyle doğrulama yapın.
Örneklerle cevaplayın
.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */
47) Hangi CSS kalıpları araç ipuçlarını ve açılır pencereleri dayanıklı hale getirir ve ne zaman kullanılır? JavaSenaryo hala gerekli mi?
CSS, basit, yönlü araç ipuçlarını kullanarak işleyebilir position, mantıksal ofsetler ve ::after oklar, tetiklenen :hover ve :focus-visible. Kullanmak inset ve hassas yerleştirme için dönüştürür ve @layer z sıralaması için yardımcı programlar. Karmaşık açılır pencereler için (çarpışma algılama, ok yeniden konumlandırma veya odak yakalama)JavaBetik gerekliliğini korusa da, CSS sunum belirteçlerini tanımlamaya devam ediyor. CSS odaklı desenlerin avantajı düşük ek yük ve zarif bozulmadır; dezavantajı ise mantık olmadan görünüm kenarlarına sınırlı uyum sağlamasıdır. Araç ipuçlarının her zaman klavyeyle erişilebilir olduğundan ve temel kontrolleri engellemediğinden emin olun.
Örneklerle cevaplayın
.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
position:absolute; inset-block-end: 100%; inset-inline-start: 0;
opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
z-index: var(--z-raised);
}
48) Karmaşık yeniden yazma işlemlerine başvurmadan, duyarlı ve okunabilir veri tabloları nasıl tasarlanır?
Duyarlı tablolar, dar ekranlarda kullanılabilir görünümler sunarken semantiği korur. Başlıkların ve ilişkilerin yeniden akışını önlemek için kısıtlı bir sarmalayıcı içinde yatay kaydırmayla başlayın. Anahtar-değer verileri için, şunu kullanarak yığılmış bir düzene geçin: display: grid Adlandırılmış alanlarla veya aşamalı açıklama için sütun görünürlüğü kontrolleri ekleyerek avantajları arasında korunan erişilebilirlik ve kolay bakım bulunur; dezavantajları ise sınırlı ekran alanı ve dikkatli taşma stili gereksinimidir. Her kesme noktasında hangi sütunların gerekli olduğunu belgeleyin ve tercih edin. text-overflow uzun değerler için araç ipuçlarıyla.
Yaklaşımlar (karşılaştırma tablosu)
| Teknik | Faydalar | Dezavantajlar | En |
|---|---|---|---|
| Yatay kaydırma sarmalayıcı | Anlamsallığı korur | Taşma stilini gerektirir | Geniş, yoğun masalar |
| Yığılmış anahtar-değer düzeni | Çok okunabilir | Yerel tablo özelliklerini kaybeder | Mobil özellikler, faturalar |
| Sütun geçişleri | Kişiye özel yoğunluk | JS kablolaması gerektirir | Yönetici panoları |
Örneklerle cevaplayın
.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
49) Harmanlama modları, filtreler ve maskeler ne zaman pratik değer sağlar ve bunların dezavantajları nelerdir?
Karışım modları ( mix-blend-mode, background-blend-mode ), filtreler ( blur, grayscale, drop-shadow ), ve maskeler ( mask-image, mask-composite ) raster düzenlemesi olmadan cam biçimlilik, çift tonlar ve dikdörtgen olmayan gösterimler gibi efektleri etkinleştirir. Sanat yönetmenliğinin önemli olduğu pazarlama yüzeylerinde ve veri görselleştirme vurgularında öne çıkarlar. Avantajları arasında varlık çoğalmasının azalması ve dinamik temalandırma bulunur; dezavantajları arasında ise düşük güçlü cihazlarda performans maliyetleri ve kontrastın azaltılması durumunda olası erişilebilirlik sorunları yer alır. Yoğun efektleri kritik olmayan yüzeyler için ayırın, GPU etkisini test edin ve önceden azaltılmış yedekler sağlayın.
Örneklerle cevaplayın
.hero::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
mix-blend-mode: screen; filter: blur(20px);
}
50) Hangi rol? color-scheme ve sistem kullanıcı arayüzü temaları tarayıcılar arasında tutarlı bir stilde nasıl çalışır?
MKS color-scheme özellik, kullanıcı aracı bileşenlerinin (form kontrolleri, bazı motorlardaki kaydırma çubukları) eşleşen arka planlar ve metin renkleriyle oluşturulması için amaçlanan açık ve koyu paletleri tanımlar. Bu, özel kontrol görünümlerine olan ihtiyacı azaltır ve koyu mod etkinken uyumsuzlukları önler. Avantajı, minimum kodla tutarlılık sağlamasıdır; dezavantajı ise motorlar arası eşitliğin gelişmesi ve özel markalamanın hala geçersiz kılma gerektirebilmesidir. color-scheme belirteçler için özel özelliklerle ve kullanıcıların seçmedikleri bir sistem tercihine hapsolmasını önlemek için açık kullanıcı geçersiz kılmalarına izin verin.
Örneklerle cevaplayın
:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */
🔍 Gerçek Dünya Senaryoları ve Stratejik Yanıtlarla En İyi CSS Mülakat Soruları
1) Arasındaki fark nedir? inline, inline-block, ve block CSS'de öğeler?
Adaydan beklenenler: Görüşmeyi yapan kişi, öğe görüntüleme özelliklerini ve bunların düzen ve kutu modellerini nasıl etkilediğini anlamanızı test etmek istiyor.
Örnek cevap:
"Önceki görevimde, ekran türlerinin yanlış anlaşılmasından kaynaklanan düzen tutarsızlıklarıyla sık sık uğraşıyordum. block eleman mevcut tüm genişliği kaplar ve yeni bir satırda başlar. inline Öğe yalnızca içeriği kadar genişlik kaplar ve yeni bir satırda başlamaz. inline-block element, bir blok element gibi genişlik ve yükseklik ayarlamasına izin veriyor ancak metin gibi satır içi akıyor. Bu farklılıkları anlamak, duyarlı tasarımları hassas bir şekilde ayarlamama ve tutarlı bir hizalama sağlamama yardımcı oldu."
2) Karmaşık düzenlerdeki CSS sorunlarını gidermeye nasıl yaklaşıyorsunuz?
Adaydan beklenenler: Görüşmeyi yapan kişi, düzen hatalarını belirleme ve düzeltme konusundaki sistematik yaklaşımınızı bilmek istiyor.
Örnek cevap:
"Önceki bir görevimde, CSS hata ayıklamak için yapılandırılmış bir yaklaşım izledim. Hesaplanan stilleri ve kutu modellerini incelemek, çakışan seçicileri izole etmek ve kuralları adım adım devre dışı bırakmak için tarayıcı geliştirici araçlarını kullandım. Ayrıca tarayıcıya özgü önekler kullandım ve birden fazla cihazda test ettim. Bu metodik hata ayıklama süreci, ön uç düzen sorunlarını önemli ölçüde azalttı."
3) CSS kaskad ve özgüllüğünün nasıl çalıştığını açıklayabilir misiniz?
Adaydan beklenenler: Görüşmeyi yapan kişi, tarayıcıların hangi CSS kurallarının öncelikli olduğunu nasıl belirlediğine dair bilginizi ölçmek istiyor.
Örnek cevap:
"CSS basamağı, birden fazla seçici aynı öğeyi hedeflediğinde hangi kuralların uygulanacağını tanımlayan süreçtir. Öncelik, satır içi stiller en yüksek sırada yer alırken, ardından kimlikler, ardından sınıflar, sözde sınıflar ve son olarak öğeler gelir. Özgüllük eşitse, kaynak sırası da önemlidir. Bunu bilmek, stillerin yanlışlıkla üzerine yazılmasını önlemeye ve daha temiz bir kod oluşturmaya yardımcı olur."
4) Çerçevelere fazla güvenmeden duyarlı tasarımı nasıl ele aldığınızı açıklayın.
Adaydan beklenenler: Görüşmeyi yapan kişi CSS esnekliği ve medya sorgusu kullanımı konusundaki anlayışınızı kontrol ediyor.
Örnek cevap:
"Son görevimde, akışkan ızgaralar, göreceli birimler gibi duyarlı düzenler tasarladım em ve remve düzenleri farklı ekran genişliklerine uyarlamak için medya sorguları kullandım. Ayrıca esnek düzenler için CSS Grid ve Flexbox kullandım. Bu yaklaşım, tasarımı ölçeklenebilir ve sürdürülebilir tutarken çerçevelere gereksiz bağımlılıkları önledi."
5) CSS'i performans ve sürdürülebilirlik açısından nasıl optimize edersiniz?
Adaydan beklenenler: Görüşmeyi yapan kişi ölçeklenebilirlik ve performansa yönelik en iyi uygulamalara ilişkin farkındalığınızı değerlendiriyor.
Örnek cevap:
"Önceki işimde, kullanılmayan stilleri kaldırarak, HTTP isteklerini azaltmak için dosyaları birleştirerek ve sürdürülebilirlik için CSS değişkenleri uygulayarak CSS'yi optimize ettim. Ayrıca, kodu düzenli ve ölçeklenebilir tutmak için BEM adlandırma kurallarını benimsedim. Ayrıca, performansı artırmak için PostCSS ve küçültme gibi modern araçlar kullandım."
6) Bir stil anlaşmazlığını çözmek için geliştiriciler veya tasarımcılarla işbirliği yapmak zorunda kaldığınız bir zamanı anlatır mısınız?
Adaydan beklenenler: Görüşmeyi yapan kişi, çapraz fonksiyonel ortamlarda ekip çalışması ve iletişim becerileri görmek ister.
Örnek cevap:
"Önceki bir projede, tasarım beklentileri ile dinamik bir formun geliştirici uygulaması arasında bir çatışma ortaya çıktı. Her iki tarafla da hızlı bir senkronizasyon planladım, görsel sorunu ekran görüntüleri kullanarak gösterdim ve tasarım tutarlılığını korumak için CSS değişkenlerinde ayarlamalar önerdim. Bu proaktif iş birliği, performansı etkilemeden görsel olarak uyumlu bir sonuç elde edilmesini sağladı."
7) CSS animasyonları veya geçişleri uygularken hangi zorluklarla karşılaştınız ve bunların üstesinden nasıl geldiniz?
Adaydan beklenenler: Görüşmeyi yapan kişi, performans optimizasyonu ve tarayıcı görüntüleme konusundaki anlayışınızı değerlendirmek istiyor.
Örnek cevap:
"Bir projede, animasyonlar yeniden akış sorunları nedeniyle sorunluydu. Bazı CSS özelliklerinin, örneğin top ve left düzen yeniden hesaplamalarını tetikliyordu. Kullanmaya geçtim transform ve opacityGPU hızlandırmalı olan ve daha akıcı geçişler sağlayan . Ayrıca, doğal bir his için animasyon sürelerini optimize ettim."
8) Büyük ölçekli bir uygulama için CSS'i nasıl yapılandırırsınız?
Adaydan beklenenler: Görüşmeyi yapan kişi sizin organizasyon, ölçeklenebilirlik ve sürdürülebilirliğe yönelik yaklaşımınızı anlamak istiyor.
Örnek cevap:
"Stilleri mantıksal olarak yapılandırmak için BEM, SMACSS veya CSS Modülleri gibi modüler bir mimari kullanırdım. Çakışmaları önlemek için her bileşenin kendi kapsamlı stilleri olurdu. Ayrıca, ekipler arasında tutarlılığı sağlamak ve proje büyüdükçe CSS'nin aşırı yüklenmesini önlemek için bir stil kılavuzu ve adlandırma kuralları uygulardım."
9) Bir müşterinin Internet Explorer 11'de bir sayfa düzeninin bozulduğu yönünde şikayette bulunduğunu varsayalım. Bunu çözmek için hangi adımları atarsınız?
Adaydan beklenenler: Görüşmeyi yapan kişi eski tarayıcı sorunlarına uyum sağlama yeteneğinizi test etmek istiyor.
Örnek cevap:
"Önce sorunu aynı tarayıcı sürümünü kullanarak yeniden oluştururdum. Ardından, tarayıcı geliştirme araçları aracılığıyla desteklenmeyen CSS özelliklerini belirler ve MDN veya Can I Use gibi kaynakları kullanarak uyumluluğu kontrol ederdim. Ardından, gerektiğinde geri dönüşler veya polyfill'ler uygulardım. Ayrıca, gelecekteki bakım için düzeltmeyi belgelerdim."
10) CSS projelerinizde tarayıcılar arası uyumluluğu nasıl sağlıyorsunuz?
Adaydan beklenenler: Görüşmeyi yapan kişi test ve uyumluluk standartları konusundaki farkındalığınızı teyit etmek istiyor.
Örnek cevap:
BrowserStack gibi araçları kullanarak önemli tarayıcılarda erken ve sık testler yaparak tarayıcılar arası uyumluluğu sağlıyorum. CSS standartlarını takip ediyor ve standart dışı özelliklerden kaçınıyorum. Ayrıca, satıcı öneklerini otomatik olarak işlemek için Autoprefixer ile PostCSS kullanıyorum. Geliştirme sırasında tutarlı doğrulama ve testler, lansman sonrası büyük sorunların önüne geçiyor.
