CSS'de Marquee - Başlangıç Kılavuzu
Marquee ilk kez Internet Explorer’da tanıtıldı ve W3C’nin 90’lı yıllarda çok popüler oldu ve sonuçta kullanılabilirlik sorunları nedeniyle HTML standart öğesinden çıkarmaya karar verdi. Web tasarımcılarının etiketi kullanmamaları teşvik edildi.
Şaşırtıcı bir şekilde, kayan yazı artık bir etiketle değil, bir geri dönüş yapıyor CSS Modülünde olduğu gibi formatlayın. Bu modül Webkit CSS spesifikasyonunun bir parçası olarak mevcuttur ve W3C şu anda benzer bir modül üzerinde çalışmaktadır. Ancak, W3C sürümü hala Aday Tavsiye aşamasında olduğu için henüz geçerli değildir. Yani, şu anda, yalnızca Webkit teknik özelliklerinden birini ele alacağız..
Sözdizimi
Öncelikle, seçim çerçevesi aşağıdaki kısa yol sözdizimini kullanarak tanımlanabilir.
-webkit-marquee: [yön] [artış] [tekrarlama] [stil] [hız]
Yukarıdaki sözdiziminde ihtiyaç duyulan değerlerin her birinin kendi kendini açıklayıcı olduğuna inanıyorum, yoksa bunları bu belgelerde yeterince açıklanmış bulabilirsiniz. Yani, bu sözdiziminin nasıl çalışacağı konusunda daha derine inmek istiyorsanız, her zaman önce belgelere başvurabilirsiniz..
Daha sonra, bazı gerçek örnekler oluşturmaya devam ederken ve bunun nasıl hareket ettiğini görmek için bize katılın..
Örnek 1: Metni kaydırma
Tamam, ilk örnekte, metnin sağdan sola hareket etmesini sağlayan seçim çerçevesinin klasik hareketini yaratacağız..
Aşağıdaki metin işaretlememizi oluşturalım:
Lolipop tepesi limon damlaları jujubes applicake meyveli kek tart meyankökü susam oturana.
Sonra seçim çerçevesini aşağıdaki sözdizimiyle tanımlayın.
-webkit-marquee: otomatik orta sonsuz kaydırma normal; taşma-x: -webkit-marquee;
Seçim çerçevesi yönü olarak ayarlandığında Oto, varsayılan olarak sağdan sola doğru hareket eder; alternatif olarak bu değeri ayrıldı. Ayrıca dikkat edin taşma-X özellik olarak ayarlanmalı -webkit-kayan yazı böylece içerik her zaman olduğu gibi davranır. Bu özelliği atlarsanız, metin ilerlemeyecek.
Demoya bak.
Örnek 2: İleri geri sıçrama
İkinci örnekte, seçim çerçevesine farklı bir stil vermeyi deneyeceğiz. Bu sefer kullanıyoruz alternatif yerine kaydırma ve yön değerini sağ. Böylece, kayan yazı soldan sağa doğru hareket eder ve ileri geri zıplar.
-webkit-marquee: otomatik orta sonsuz alternatif normal; taşma-x: -webkit-marquee;
Demoya bak
Örnek 3: Metni yukarı taşıma
Ve son örnek için, seçim çerçevesini yukarı doğru hareket edecek şekilde değiştireceğiz. İki tane yön bunun için değerler; değerini değiştirebilirsiniz yukarı veya önde.
Şahsen, Webkit'in bazı insanlar için kafa karışıklığına neden olabileceğini düşündüğümden, temelde aynı şeyi yapan iki değer sağladığını anlamıyorum..
-webkit-marquee: yukarı orta sonsuz kaydırma normal; taşma-x: -webkit-marquee;
Demoya bak
Dahası, bazı örnekler daha derledim ancak hepsi burada açıklanırsa bunaltıcı olacak.
Ancak, tüm demosu görüntüleyebilir ve kaynakları aşağıdaki bağlantılardan indirebilirsiniz..
- gösteri
- Kaynak İndir
Son düşünce ve referanslar
İlk önce, sonunu bulduğunu düşündüğüm seçim çerçevesine hala ilgi duyulduğuna şaşırdım. Bu aynı zamanda, bunun gibi bir CSS modülünün nasıl faydalı olacağına dair soru sormamı sağladı. Aslında her tarayıcı hala mirasını destekliyor etiket.
Yani ne düşünüyorsun? Seçim çerçevesi bu yaşta hala geçerli mi ve modern web tasarımında faydalı olabilir mi??
Bu seçim çerçevesi hakkında hala meraklıysanız, aşağıdaki referanslardan bazılarını ziyaret edebilirsiniz:
- Safari CSS Referansı
- Webkit seçim çerçevesi jeneratörü
- Eskilerin kapsamlı dokümantasyonu
Sitepoint etiketinden. - Ve bu Marquee Generator dahil, hemen hemen her şey için bir jeneratör vardır..
