Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Tayfun Erbilen tarafından Prototurk.com için hazırlanan bir CSS eğitim içeriğidir. Eğitmen, CSS scroll snap ve flexbox özellikleri hakkında detaylı bilgiler sunmaktadır.
- Videoda, eski JavaScript yöntemlerine göre daha performanslı ve basit bir şekilde scroll davranışlarını belirlemek için CSS scroll snap özelliğinin kullanımı adım adım gösterilmektedir. Ayrıca flexbox düzenleyicisi ve scroll snap özelliğinin birlikte kullanımı da ele alınmaktadır. Eğitim, temel HTML ve CSS yapılandırması ile başlayıp, scroll snap type, scroll snap align, scroll padding, scroll margin gibi özelliklerin pratik örneklerle anlatımını içermektedir.
- Eğitimde yatay ve dikey scroll snap örnekleri, flex-direction, overflow gibi CSS özellikleri üzerinden örnekler verilmekte ve farklı tarayıcılardaki uyumluluk testleri yapılmaktadır. Özellikle Internet Explorer dışında diğer tarayıcılardaki scroll snap özelliğinin davranışı da videoda ele alınmaktadır.
- CSS Scroll Snap Özellikleri
- Tayfun Erbilen, CSS scroll snap özelliğini anlatmak için bu videoyu hazırlamıştır.
- Eskiden scroll davranışlarını belirlemek için JavaScript kullanılıyordu ancak bu performans sorunları ve anlamsız hataları beraberinde getiriyordu.
- CSS'in scroll snap özelliği ile scroll davranışlarını daha kolay ve performanslı bir şekilde ayarlayabiliriz.
- 00:49HTML ve CSS Yapısı
- Örnek için bir index.html dosyasında main tag içerisinde sekiz adet article tag kullanılmıştır.
- Main etiketine yükseklik 100vh (ekranın tam yüksekliği) verilerek ve overflow-y auto özelliği ile dikey kaydırma özelliği eklenmiştir.
- Article elemanlarına genişlik ve yükseklik %50, border, padding ve margin değerleri verilerek düzenlenmişlerdir.
- 03:45Scroll Snap Özelliklerinin Uygulanması
- Scroll snap özelliği için öncelikle kapsayıcıya scroll-snap-type özelliği tanımlanır ve ekseni (x veya y) ve tipi (mandatory veya proximity) belirtilir.
- Mandatory tip daha katı kurallarla scroll işlemi sağlar, proximity ise daha hafif bir scroll deneyimi sunar.
- Scroll snap elemanlarına scroll-snap-align özelliği ile başlangıç (start), orta (center) veya son (end) konumları belirlenebilir.
- 05:35Mobil Cihazlarda Kullanımı
- Scroll snap özelliği özellikle mobil cihazlarda kullanıcı deneyimini iyileştirmek için kullanışlıdır.
- Kullanıcı ne kadar hızlı kaydırırsa kaydırın, scroll snap özelliği sayesinde belirli noktalarda otomatik olarak durur.
- Bu özellik sadece CSS'de iki satır kod ile uygulanabilir ve harika bir performans sunar.
- 06:07Header ve Padding/Margin Sorunu
- Örnek için bir header eklenerek position sticky özelliği ile kaydırma sırasında sabit kalması sağlanmıştır.
- Scroll snap ile başlangıç pozisyonuna geldiğinde header altında kalma sorunu yaşanabilir.
- Bu sorunu çözmek için scroll-padding veya scroll-margin özellikleri kullanılabilir.
- 07:43Farklı Bir Örnek
- Yeni bir örnek için main etiketi içerisinde değer adında altı adet article elemanı oluşturulmuştur.
- Bu elemanlara display flex, align-items center ve justify-content center özellikleri ile ortalama ve font size ayarlanmıştır.
- Scroll snap özelliği tekrar uygulanarak ve for döngüsü ile elemanlara rastgele arka plan renkleri verilerek örnek tamamlanmıştır.
- 11:00CSS Overflow ve Ekseni Ayarları
- Overflow özelliği x ekseni olarak ayarlanarak içeriklerin yatay kaydırma özelliği kazanıyor.
- Article etiketleri içinde dört adet article oluşturulup, if koşulu ile dört article'ın genişliği yüzde yüz ve renkleri #333 olarak ayarlanıyor.
- Overflow özelliği y ekseni olarak ayarlandığında içerikler dikey kaydırma özelliği kazanıyor.
- 13:42Tarayıcı Desteklemesi
- CSS özellikleri internet explorer dışında diğer tüm tarayıcılarda sorunsuz çalışıyor.
- Scroll snap özelliği de typex ve typey gibi ayarlarla birçok büyük tarayıcı tarafından destekleniyor.