Radyo Düğmeleriyle CSS Özel Özelliklerini Değiştirme

Faydalı Alternatif Metin Yazma

bir parçası olarak Codrops’ta yayınlanan son makale, kullanıcının radyo düğmelerini kullanarak bir klip yolu için üç farklı değer arasında geçiş yapmasına izin veren bazı demolar yaptım. Bugünlerde pek çok şeyde olduğu gibi, kendimi özel özellikler! Özel özelliklerin bunun için neden harika olduğuna bir göz atalım.

Ortak yaklaşımlar

Buna yaklaşmanın bir yoluna bakalım olmadan özel özellikler. Bir kullanıcının bir radyo düğmesiyle ne zaman etkileşime girdiğini tespit etmek ve buna bir sınıf eklemek için Javascript kullanabiliriz. <figure> buna göre:

const clippedElement = document.querySelector('.clipped-element')
const controls = document.querySelector('.controls')

let currentClass = 'circle'

const onChange = (e) => {
if (!e.target.value || !e.target.checked) return

if (clippedElement.classList.contains(currentClass)) {
clippedElement.classList.replace(currentClass, e.target.value)
} else {
clippedElement.classList.add(e.target.value)
}

currentClass = e.target.value
}

controls.addEventListener('change', onChange)

Ardından, CSS’mizdeki her sınıf için klip yolu değerlerimizi tanımlama meselesidir:

.clipped-element {
-webkit-clip-path: circle(25% at 70%);
clip-path: circle(25% at 50%);
}

.clipped-element.polygon {
-webkit-clip-path: polygon(50% 0%...);
clip-path: polygon(50% 0%...);
}

.clipped-element.svg {
-webkit-clip-path: path('M202.2...');
clip-path: path('M202.2...');
}

Kısalık ve okunabilirlik için buradaki son ikisinin değerlerini kısalttım, ancak bu demo tam kodu vardır.

Başka bir seçenek de style JS’de öznitelik, ancak bana daha temiz geldiği için CSS yolunu tercih ediyorum. clip-path bazı tarayıcılarda bir önek gerektirir, bu nedenle bunu CSS’de ayarlamak daha sürdürülebilir görünüyor – ancak bu kişisel tercih meselesi.

Hiçbir şey yokken yanlış Bu yaklaşımlarla, alternatifin özel özelliklerle nasıl göründüğünü görelim.

Özel özelliği değiştirme

HTML’mizde değerleri olan üç radyo düğmemiz var. daire, çokgen ve svg sırasıyla:

<form class="controls">
<fieldset>
<legend>Switch clip path values</legend>
<div>
<input type="radio" name="shape" id="r_circle" value="circle" checked />
<label for="r_circle">Circle</label>
</div>
<div>
<input type="radio" name="shape" id="r_polygon" value="polygon" />
<label for="r_polygon">Polygon</label>
</div>
<div>
<input type="radio" name="shape" id="r_svg" value="svg" />
<label for="r_svg">SVG path</label>
</div>
</fieldset>
</form>

<div class="clipped-element"></div>

CSS’deki her değer için özel bir özellik atayabiliriz (yine, SVG yolu ve çokgen değerleri burada kısa olması için kısaltılmıştır):

.clipped-element {
--circle: circle(25% at 50%);
--polygon: polygon(50% 0%...);
--svg: path('M202.2...');
}

Ek olarak, özel bir özellik atayabiliriz. --clip klip yolumuz için bir değer. Bu, her değiştirdiğimizde --clip değer, hem önek özellik değeri ve normal özellik değeri güncellenecektir. (Bununla ilgili daha önceki bir makalede yazmıştım, Özel Özellikler İçin 7 Kullanım.)

Kullanarak, ilk radyo düğmesi seçeneğimize karşılık gelen bir başlangıç ​​değeri vereceğiz. --circle özel mülk:

.clipped-element {
--circle: circle(25% at 70%);
--polygon: polygon(50% 0%...);
--svg: path('M202.2...');

--clip: var(--circle);
-webkit-clip-path: var(--clip);
clip-path: var(--clip);
}

Daha sonra, bizim onChange olay işleyici, değerini güncelliyoruz --clip seçilen radyo girişine karşılık gelen özel özellik ile. Kullanabiliriz şablon değişmezleri Bunu yapmak için:

const onChange = (e) => {
if (!e.target.value || !e.target.checked) return

clippedElement.style.setProperty('--clip', `var(--${e.target.value})`)
}

Aynı sonucu elde ediyoruz ve hem CSS hem de JS kodumuz çok daha özlü.

Tam demo:

Kalemi Gör
Özel özelliklere sahip klip yolu geçişi
Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Bu arada, CSS Tricks kısa süre önce bir özel mülkler için eksiksiz kılavuzbazı harika ipuçları ve bunları kullanmanın yollarına ilişkin örnekler içeriyor.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.