CSS Kaydırma Çubuğu Oluşturucu

::-webkit-scrollbar sözde öğeler ailesine sahip Chrome, Safari ve Edge tarzı kaydırma çubukları: iz, başparmak ve başparmağın vurgulu durumu için ayrı kurallar, ayrıca tam piksel genişliği ve başparmak kenarlık yarıçapı. Firefox tüm bunları tamamen göz ardı eder ve bunun yerine daha sonra CSS Kaydırma Çubukları spesifikasyonuna giren kaydırma çubuğu genişliği ve kaydırma çubuğu rengi olmak üzere iki standart özelliği okur. Bunlar aynı özelliğin iki lehçesi değildir; farklı tavanlara sahip iki farklı özellik kümesidir ve çoğu kaydırma çubuğu oluşturucu, yalnızca WebKit sonucunu göstererek boşluğu sessizce doldurur. Bu değil.

Genişliği, iz rengini, başparmak rengini, vurgu rengini ve başparmak köşesi yarıçapını bir kez ayarladığınızda araç aynı girişlerden iki kural seti oluşturur. WebKit bloğu ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ve :hover durumunu sol demo kutusuna kadar kapsar, yani orada gördüğünüz şey tam olarak Chrome, Safari ve Edge'in oluşturduğu şeydir; simüle edilmiş bir katman değil, tarayıcının kendi gerçek motorudur. Firefox bloğu, aynı tarayıcının kendi motorunu kullanarak sağ demo kutusunda kaydırma çubuğu genişliğini ve kaydırma çubuğu rengini ayarlar; bu nedenle kutu yalnızca bu sayfa gerçekten Firefox'ta açıkken farklı görünür; bir WebKit tarayıcısında, burada kendi varsayılan kaydırma çubuğunu gösterir ve araç, ödünç alınmış piksellerle sahte bir Firefox görünümü vermek yerine bunu söyler.

Genişlik eşlemesi boşluğun en açık örneğidir: Firefox'un kaydırma çubuğu genişliği yalnızca otomatik, ince veya hiçbiri anahtar kelimelerini kabul eder; asla tam bir piksel rakamını kabul etmez. Bu oluşturucu, seçtiğiniz genişliği dürüst bir şekilde eşler (8 piksel ve altı ince olur, daha geniş olan her şey otomatik olur) ve ortaya çıkan anahtar kelimeyi, var olmayan sahte piksel mükemmelliğindeki bir Firefox sonucu icat etmek yerine, girişinizin yanında görüntüler. Firefox'un ayrıca ayrı bir fareyle üzerine gelme rengini, bağımsız bir başparmak kenarlık yarıçapını veya yalnızca kaydırma çubuğu renginin ikinci değeri olmayan bir iz rengini ayarlamanın bir yolu yoktur - bunlar, bu araçtaki eksiklikler değil, platformun kalıcı, gerçek sınırlamalarıdır.

Birleştirilmiş CSS bloğunu kopyalayın ve her iki kural kümesi de, her biri kendi yorumu altında, olduğu gibi bir stil sayfasına yapıştırmaya hazır şekilde birlikte hareket eder. Siz kontrolleri sürükledikçe her şey kendi tarayıcınızda oluşturulur ve güncellenir; yükleme yok, hesap yok, sunucu gidiş-dönüş yok ve sayfa yüklendikten sonra çevrimdışı çalışmaya devam ediyor.