Çoğu web geliştiricisi gibi, zaman zaman nasıl biçimlendirildiklerini görmek için web sitelerinin kaynağına bakmak istiyorum. Firebug ve Chrome Geliştirici Araçları gibi araçlar kodu incelemeyi kolaylaştırır, ancak yalıtılmış bir bölümü kopyalayıp yerel olarak oynamak istersem, tüm öğeleri ve ilgili css'lerini kopyalamak bir acı olur. Ve muhtemelen tüm kaynağı kurtarmak ve ilgisiz kodu kesmek için çok fazla iş.

Firebug'daki bir düğümü sağ tıklayıp "Bu düğüm için HTML + CSS'yi kaydet" seçeneğine sahip olsaydım harika olurdu. Böyle bir araç var mı? Bu özelliği eklemek için Firebug veya Chrome Geliştirici Araçlarını genişletmek mümkün mü?

SnappySnippet

Sonunda bu aracı oluşturmak için biraz zaman buldum. SnappySnippet'i Github'dan yükleyebilirsiniz . Belirtilen (son incelenen) DOM düğümünden kolay HTML + CSS çıkarılmasına olanak tanır. Ayrıca, kodunuzu doğrudan CodePen veya JSFiddle'a gönderebilirsiniz. Zevk almak!

Diğer özellikler

• HTML'yi temizler (gereksiz nitelikleri kaldırma, girintiyi düzeltme)
• CSS'yi okunabilir hale getirmek için optimize eder
• tamamen yapılandırılabilir (tüm filtreler kapatılabilir)
• ile çalışır ::beforeve ::aftersözde öğeler
• Bootstrap & Flat-UI projeleri sayesinde güzel kullanıcı arayüzü

kod

SnappySnippet açık kaynak kodludur ve kodu GitHub'da bulabilirsiniz .

uygulama

Bunu yaparken çok şey öğrendiğimden, yaşadığım bazı problemleri ve çözümlerimi paylaşmaya karar verdim, belki birisi ilginç bulacaktır.

İlk deneme - getMatchedCSSRules ()

İlk başta orijinal CSS kurallarını almayı denedim (web sitesindeki CSS dosyalarından geliyor). Oldukça şaşırtıcı, bu çok basit window.getMatchedCSSRules(), ancak iyi çalışmadı. Sorun, HTML ve CSS seçicilerinin yalnızca belgenin tamamı bağlamında eşleşen ve bir HTML pasajı bağlamında artık eşleşmeyen bir bölümünü almamızdı. Seçicileri ayrıştırmak ve değiştirmek iyi bir fikir gibi görünmediğinden, bu girişimden vazgeçtim.

İkinci deneme - getComputedStyle ()

Sonra, @CollectiveCognition'ın önerdiği bir şeyden başladım - getComputedStyle(). Ancak, gerçekten tüm stilleri satır içi yerine CSS form HTML ayırmak istedim.

Sorun 1 - CSS'yi HTML'den Ayırma

Buradaki çözüm çok güzel değil, oldukça basitti. Seçilen alt ağaçtaki tüm düğümlere kimlikler atadım ve bu kimliği uygun CSS kuralları oluşturmak için kullandım.

Sorun 2 - Özellikleri varsayılan değerlerle kaldırma

Düğümlere kimlik atamak güzel çalıştı, ancak her CSS kuralımın tüm CSS'yi okunamaz hale getiren ~ 300 özelliğe sahip olduğunu öğrendim.
Çıkıyor getComputedStyle()getiri verilen elemanı için hesaplanan tüm olası CSS özelliklerini ve değerler. Bazıları boş olduğunda, bazılarında tarayıcı varsayılan değerleri vardı. Varsayılan değerleri kaldırmak için önce tarayıcıdan almak zorunda kaldım (ve her etiketin farklı varsayılan değerleri vardır). Çözüm, web sitesinden gelen öğenin stillerini, boş bir öğeye eklenen aynı öğeyle karşılaştırmaktı <iframe>. Buradaki mantık, boş bir stil sayfası olmamasıydı <iframe>, bu yüzden eklediğim her öğenin yalnızca varsayılan tarayıcı stilleri vardı. Bu şekilde önemsiz olan özelliklerin çoğundan kurtulabildim.

Problem 3 - Sadece steno özelliklerinin korunması

Ben tespit bir sonraki şey stenografi eşdeğeri olan özellikleri gereksiz yere basılmış oldu (örneğin vardı border: solid black 1pxve sonra border-color: black;, border-width: 1pxitd.).
Bunu çözmek için sadece stenografi eşdeğeri olan özelliklerin bir listesini oluşturdum ve sonuçlardan filtreledim.

Sorun 4 - Ön ekli özellikleri kaldırma

Her kuralın özellikleri sayısı önemli ölçüde önceki işlemden sonra düşürmek oldu, ama ben çok vardı eşik tespit ettik -webkit-asla duymak ait getirdiğiniz öneki özellikleri ( -webkit-app-region? -webkit-text-emphasis-position?).
Bunlardan bazı yararlı görünüyordu çünkü (bu özelliklerin herhangi tutmalı acaba -webkit-transform-origin, -webkit-perspective-originvs.). Ancak, bunu nasıl doğrulayacağımı anlayamadım ve çoğu zaman bu özelliklerin sadece çöp olduğunu bildiğim için hepsini kaldırmaya karar verdim.

Sorun 5 - Aynı CSS Kurallarını Birleştirmek

Bir sonraki sorun, aynı CSS kurallarının tekrar tekrar tekrarlanmasıydı (örneğin, <li>aynı stilleri olan her biri için oluşturulan CSS çıktısında aynı kural vardı).
Bu sadece kuralları birbirleriyle karşılaştırma ve tam olarak aynı özellik ve değerlere sahip olan kuralları birleştirme meselesiydi. Sonuç olarak, yerine #LI_1{...}, #LI_2{...}aldım #LI_1, #LI_2 {...}.

Sorun 6 - HTML girintisini temizleme ve düzeltme

Sonuçtan memnun olduğum için HTML'ye geçtim. Çoğunlukla outerHTMLözellik tam olarak sunucudan döndürüldüğü gibi biçimlendirilmiş kalması nedeniyle bir karışıklık gibi görünüyordu . İhtiyaç duyulan
tek HTML kodu outerHTMLbasit bir kod yeniden biçimlendirmesiydi. Her IDE'de mevcut bir şey olduğundan, tam olarak bunu yapan bir JavaScript kütüphanesi olduğundan emindim. Ve haklı olduğum ortaya çıkıyor (jquery-clean) . Dahası, gereksiz niteliklerin kaldırılması ekstra var ( style, data-ng-repeatvb.).

Sorun 7 - CSS'yi kıran filtreler

Bazı durumlarda yukarıda belirtilen filtrelerin snippet'te CSS'yi bozma ihtimali olduğundan, hepsini isteğe bağlı yaptım. Bunları Ayarlar menüsünden devre dışı bırakabilirsiniz .

Başlangıçta bu soruyu bir Chrome (veya FireFox) çözümü aradığımı sordum, ancak Internet Explorer geliştirici araçlarında bu özellikle karşılaştım. Aradığım hemen hemen (javascript hariç)

Sonuç:

Webkit tarayıcıları (FireBug hakkında emin değilim) bir öğenin HTML kodunu kolayca kopyalamanıza izin verir, bu da sürecin bir parçasıdır.

Bir öğenin HTML'sini kopyalamadan önce bunu (javascript konsolunda) çalıştırmak, verilen üst öğe ve tüm alt öğeler için hesaplanan tüm stilleri, daha sonra HTML'nin bir parçası olarak kullanılabilecek satır içi stil özelliğine taşır. .

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

Bu tamamen bir kesmek ve wade için "önemsiz" css öznitelikleri bir sürü olacak, ama en azından başlamak gerekir.

Bu aracı yıllar önce aynı amaç için oluşturdum:
http://www.betterprogramming.com/htmlclipper.html

Kullanabilir ve geliştirebilirsiniz.

Bu, karalama defteri adı verilen Firebug Eklentisi tarafından yapılabilir

Ayarda Javascript seçeneğini kontrol edebilirsiniz

Düzenle:

Bu da yardımcı olabilir

Firequark, HTML Ekran Kazıma işlemine yardımcı olmak için Firebug'un bir uzantısıdır. Firequark, Firebug (Firefox için bir web geliştirme eklentisi) kullanarak bir web sayfasından tek veya birden fazla html düğümü için css seçiciyi otomatik olarak çıkarır. Oluşturulan css seçici, bilgileri çıkarmak için Scrapi gibi html ekran sıyırıcılarına bir girdi olarak verilebilir. Firequark, html ekran kazıma kullanımı için css seçicinin gücünü ortaya çıkarmak için üretilmiştir.

divclip Florentin Şardan en güncellenmiş versiyonudur htmlclipper

modern geliştirmelerle: ES5, HTML5, kapsamlı CSS ...

aşağıdakilerle programlı bir stilize div çıkarabilirsiniz:

var html = require("divclip").bySel(".article-body");
console.log(html);

Zevk almak.

Eklenti gerekmez. Sadece tek bir tıklama ile Internet Explorer 11 yerel Geliştirici Araçları ile çok basit bir şekilde yapılabilir, çok temiz. Bir öğeye sağ tıklayın ve öğeyi inceleyin ve bir bloğa sağ tıklayın ve "Öğeyi stillerle kopyala" yı seçin. Aşağıdaki resimde görebilirsiniz.

Css kodunu çok temiz sağlar,

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

Son zamanlarda, denetlenen öğeyi, html'yi ve yalnızca ilgili css ve medya sorgularını bir sayfadan kopyalamak için bir krom uzantısı "eXtract Snippet" oluşturdum. Bunun size gerçek ilgili CSS'yi vereceğini unutmayın

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en

Bunun için tek bir çözümü olan bir araç bilmiyorum, ancak Firebug ve Web Developer uzantısını aynı anda kullanabilirsiniz.

Hangi css'nin bir öğe ile ilişkili olduğunu görmek için ihtiyacınız olan html bölümünü (Element Inspect) ve Web Developer'ı kopyalamak için Firebug'u kullanın (Web Developer'ı "Stil Bilgilerini Görüntüle" olarak adlandırın - Firebug'un "Inspect Element" gibi çalışır, ancak html'yi göstermek yerine) işaretleme, bu işaretlemeyle ilişkili CSS'yi gösterir).

Tam olarak istediğiniz şey değil (her şey için tek bir tıklama), ancak oldukça yakın ve en azından sezgisel.

Firebug'da da bu özelliğe ihtiyacım var! O zamana kadar başka bir yaklaşım, sınıfları kaldırmak ve css'i satır içi stillere dönüştürmek için bu çevrimiçi hizmeti kullanmaktır .

http://clipboardjs.com bunu ve oldukça iyi yapıyor. Kopyalanan sürümden beklentiniz tam olarak orijinalinde olduğu gibi, onunla oynayabilir ve öğrenebilirsiniz, ancak gerçekçi olmayabilir.

Sadece web sayfasından istediğiniz bölümü kopyalayın ve wysiwyg editörüne yapıştırın. Düzenleyici araç çubuğundaki "kaynak" düğmesini tıklayarak html kaynağını kontrol edin.

Bir Drupal sitesinde çalışırken en kolay yolu buldum. Wysiwyg CKeditor kullanıyorum.

jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

kullanımı:$("#login_wrapper").getStyles()

En çok oy alan yanıtı sürüklenebilir bir yer imi olarak uyarladım.

Bu sayfayı ziyaret edin ve "jQuery Kodunu Çalıştır" düğmesini yer işareti çubuğunuza sürükleyin.

Tüm sayfanın HTML, CSS, vb kaydeder bir firefox eklentisi var .. ama kısmi bir tasarruf yapan bir görmedim.

IE 5.5 olsa da aradığını vardı hatırlıyorum;)

Burada cevap olarak bahsedilen tüm araçları inceledim. Ama baktığınız güzel yüzü ile tekrarlanan, kirli HTML CSS veriyorlar. Sana JS vermiyorlar.

Ne yaptığım:

1. İlk olarak sayfada gerekli olmayan reklamlara filtre uygularım
2. Ardından, tüm web sayfasını bağlantı kaynakları ile birlikte kaydedin.
3. Gereksiz HTML, CSS ve JS'yi kaldırın
4. bağlantıların kaynaklarını tek tek dikkatlice tutun.