GrabCSS: Herhangi bir web öğesinden temiz HTML ve CSS çıkarın
GrabCSS, Schneider Damien tarafından, canlı web sayfalarından bileşen kodunu hızlı bir şekilde çıkarmak için bir Chrome uzantısıdır. Bir öğenin üzerine geldiğinizde temiz, biçimlendirilmiş HTML ve CSS kopyalar, CSS değişkenlerini ve miras alınan kuralları çözer, böylece çıktı, prototipleme, denetleme ve öğrenme için bağımsız olarak çalışır. Yetenekler arasında Scoped CSS, Inline Styles, Tailwind çıktısı, animasyon ve sahte durum yakalama, klavye DOM navigasyonu ve WCAG kontrast kontrolleri bulunur. Araç, ön uç geliştiricilerini, UI/UX tasarımcılarını, web denetçilerini ve okunabilir bileşen koduna hızlıca ihtiyaç duyan öğrencileri hedef alır.
Hesaplanan gürültüyü atlayarak özlü, insan tarafından okunabilir CSS üretir
GrabCSS odaklanmış kuralları çıkarır tarayıcı denetleyici panellerinde gösterilen uzun hesaplanan özellikler listesi yerine. Uzantı, CSS değişkenlerini ve miras alınan bildirimleri çözer, böylece parçalar bağımsız çalışır ve çıktıyı yaygın iş akışlarına uyacak şekilde biçimlendirir. Çıktı varyantları, temiz sınıf adları kullanan bir kapsamlı CSS seçeneği, bir satır içi stiller seçeneği ve yapıştırılan bileşenlerin ham hesaplanan stillerden daha kolay uyarlanmasını sağlayan bir Tailwind CSS sınıfları seçeneği içerir.
Kesin seçim ve hızlı kod yakalama için fare ve klavye kontrolleriyle destekler
Seçici aktif olduğunda yüzen bir panel gösterir, böylece öğeleri üzerine gelerek inceleyebilir ve bir tıklama ile biçimlendirilmiş kodu kopyalayabilirsiniz. Klavye ile yönlendirilmiş DOM navigasyonu, kesin hedefleme için üst ve alt öğeler arasında hareket etmek için Yukarı Ok ve Aşağı Ok tuşlarını kullanır. Çıkarıcı, animasyonları, geçişleri ve :hover gibi sahte durumları yakalar ve temel erişilebilirlik incelemesine yardımcı olmak için üzerine gelinen metin öğelerinde WCAG kontrast kontrolleri çalıştırılır.
Yerel olarak işler, Chromium iş akışlarına uyar ve hafif bir DevTools alternatifi olarak hareket eder
Tüm işleme tarayıcıda gerçekleşir, dış veri toplama yoktur ve hesap gerektirmez, böylece yakalamalar makinede kalır. Uzantı, Chrome ve Microsoft Edge ve Brave gibi diğer Chromium tabanlı tarayıcılarda kurulur, mevcut geliştirme ayarlarına eklemeyi kolaylaştırır. Geliştirici aracı, hızlı, temiz çıktılar için övgü alan DevTools'u araştırmaya hafif bir alternatif olarak konumlandırır. Hesap tabanlı senkronizasyonun olmaması, merkezi parça paylaşımının ayrı adımlar gerektirdiği anlamına gelir.
Bireysel iş akışları için pratik bir seçim, ekip paylaşımı için ödünler ile
GrabCSS, tek bir makinede kompakt, düzenlenebilir bileşen parçalarına ihtiyaç duyan bireysel ön uç uygulayıcıları ve öğrenciler için pragmatik bir seçimdir. Tarayıcıya özel tasarımı, yerel kontrolü ve hızlı çıkarımı destekler, ancak aynı tasarım, ekip veya çoklu cihaz kütüphaneleri için hesap tabanlı senkronizasyon sağlamadığı anlamına gelir. Hızlı, manuel yakalama için tercih edin; işbirlikçi dağıtım gerektiğinde ayrı bir paylaşılan kütüphaneye güvenin.
