Çoğu web geliştiricileri gibi, bazen web sitelerinin kaynağı kendi biçimlendirme nasıl inşa edildiğini görmek için bakmak gibi. Araçlar gibi Firebug ve Chrome Geliştirici Araçları yapmak kolay incelemek kod ama istersem kopya izole bir bölüm ve oyun ile yerel olarak, bir ağrı kopyaları tek tek öğeleri ve ilişkili css. Ve tüm kaynak tasarrufu ve alakasız kodu kesip belki de daha fazla.

Eğer Firebug sağ tıklatın düğüm ve "bu düğüm için CSS" seçeneği. HTML Kurtarmak olsaydı çok iyi olurdu Böyle bir araç var mı? Firebug uzatmak veya Chrome Geliştirici Araçları için bu özelliği eklemek için mi?

SnappySnippet

Sonunda bu aracı oluşturmak için biraz zaman buldum. Chrome Web Mağazası'ndan SnappySnippet yükleyebilirsiniz. Kolay HTML (son kontrol) belirtilen DOM düğüm çıkarma CSS sağlar. Ayrıca, kodunuzu düz CodePen veya JSFiddle gönderebilirsiniz. Tadını çıkarın!

Diğer özellikler

• temizler HTML (gereksiz öznitelikleri, girinti tamir çıkarma)
• optimize bilginin CSS
• tamamen yapılandırılabilir (tüm filtreler kapalı olabilir)
• ::before ::after ile çalışır pseudo-elementleri
• Bootstrap & Flat-UI projeler için güzel UI teşekkürler

Kod

SnappySnippet açık kaynak ve code on GitHub bulabilirsiniz.

Uygulama

Bunu yaparken oldukça çok şey öğrendim bu yana, onlara yaşadığım bazı sorunlar ve çözümleri paylaşmaya karar verdim, belki biri ilginç bulur.

İlk deneme - getMatchedCSSRules()

İlk başta orijinal CSS kuralları (web sitesinde CSS dosyalarından geliyor) almayı denedim. Oldukça şaşırtıcı, bu işe yaramadı window.getMatchedCSSRules() çok basit teşekkürler ancak. Sorun artık bir HTML parçacığını bağlamında değil eşleşen olan tüm belge kapsamında eşleşen olan HTML ve CSS seçiciler sadece bir kısmını vermiştik. Ve seçiciler ayrıştırma değiştirmek iyi bir fikir gibi gelmedi bu yana, bu girişimde verdim.

İkinci girişim - getComputedStyle()

Sonra, @CollectiveCognition - getComputedStyle() önerilen şeylerden başladım. Ancak, ben gerçekten CSS form HTML ayırmak için tüm stilleri satır içi uygulaması yerine istedi.

Sorun 1 - HTML CSS ayırma

Çözüm burada çok güzel ama çok kolay değildi. Seçilen alt ağaçtaki tüm düğümlere Kimlikleri görevlendirdim ve bu KİMLİĞİ uygun CSS kuralları oluşturmak için kullanılır.

Sorun 2 - varsayılan değerler ile kaldırma özellikleri

Düğümler işe yaradı kimlik atama, ancak CSS kuralları her ~300 özellikleri tüm CSS okunmaz hale sahip olduğunu öğrendim.getComputedStyle() Olası CSS özellikleri ve değerleri belirli bir eleman için hesaplanmış. bütün döndüren çıkıyor Boş yere bazıları, bazı tarayıcı varsayılan değerler vardı. Varsayılan kaldırmak için tarayıcı ilk (ve her etiketi farklı bir varsayılan değeri vardır) onları almak zorunda kaldım değerler. Çözüm öğesi stilleri aynı öğe <iframe> boş takılması ile web sitesinden geliyor amaçladık. Buradaki mantık sadece varsayılan tarayıcı stilleri vardı orada eklenmiş ettim <iframe>, Her ne kadar boş bir öğe stil sayfaları yok oldu. Böyle önemsiz olduğu özellikleri en kurtulmak mümkün oldu.

Sorun 3 - sadece steno özellikleri tutmak

Steno eşdeğer olan özelliklerini gereksiz yere (örneğin border: solid black 1px *8,* ** 9 vb. basılı olduğunu fark var sonraki şey oldu.

Sorun 4 - öneki özellikleri kaldırılıyor

Sayı özellikleri her kural daha düşük sonra önceki işlemi, ama ben buldum bu eşik çok -webkit- öneki özellikleri olduğunu daha önce hiç duydunuz (-webkit-app-region? *?*12).-webkit-transform-origin, -webkit-perspective-origin vb.) gibi görünüyordu, çünkü bu özelliklerden herhangi birini tutmam gerektiğini düşünüyorum. Bunu doğrulamak için nasıl çözemedim, olsa da, ve çoğu zaman bu özellikler sadece çöp olduğunu bildiğimden, onları ortadan kaldırmak için karar verdi.

Sorun 5 - aynı CSS kuralları birleştirerek

Sonraki sorunum var görülmüş aynı CSS kuralları tekrarlanan tekrar tekrar (örneğin her <li> ile aynı stilleri vardı aynı kural CSS çıktı yarattı).#LI_1{...}, #LI_2{...} yerine #LI_1, #LI_2 {...} aldım.

Sorun 6 - temizlik ve HTML girinti tespit

Sonuçtan mutlu olduğum HTML taşındım. Çoğunlukla outerHTML özelliği sunucudan dönen olduğu gibi tam olarak biçimlendirilmiş tutar çünkü bir karmaşa gibi görünüyordu.outerHTML alınan gereken tek şey basit bir kod biçimlendirme. Bir şey her IDE mevcut olduğundan, tam olarak bunu yapan bir JavaScript Kütüphanesi olduğundan emindim. Ve I was right (jquery-clean) çıkıyor. Dahası, gereksiz öznitelikleri kaldırma ekstra (style, data-ng-repeat vb.) var.

Sorun 7 - filtreler CSS kırma

Bazı durumlarda filtreler yukarıda belirtilen CSS kod sonu olabilecek bir şans olduğunu, çünkü, hepsi isteğe bağlı yaptım. Onları devre dışı bırakabilirsinizAyarlarmenü.