Yalnızca belirli bir sayfada kullanılan css'i çıkarmak

Geçmişte ve günümüzde çok fazla kişi tarafından üzerinde çalışılan dinamik olarak oluşturulmuş bir siteniz olduğunu ve şu anda 20.000'den fazla CSS satırı içeren bir paylaşılan stil sayfalarına sahip olduğunuzu varsayalım. Hiç organize değil, bazı sınıf ve kimlik tabanlı seçiciler var ama aynı zamanda çok fazla etiket tabanlı seçici var. Ve sonra, bazı denetleyiciler aracılığıyla bu stilleri kullanan 100 şablonunuz olduğunu söyleyin.

Firebug gibi çalışan, bir url'ye işaret edebileceğiniz ve o sayfa için geçerli tüm CSS seçicilerini belirleyip bunları bir dosyaya dökebilecek bir araç var mı? Temelde, paylaşılan stil sayfalarını sayfa sayfa ayırmanın bir yolu.

Daha önce bir Firefox eklentisi olan Dust-Me Selectors'u kullandım. CSS değerlerinin kullanıldığı birkaç sayfada birleşik bir liste tuttuğu için kullanımı çok kolaydır ve çok yönlüdür.

Dezavantajı, sitenin tamamını örtmek için onu otomatikleştirememem, bu yüzden onu sitemin yalnızca önemli sayfalarında / şablonlarında kullandım. Yine de çok kullanışlıdır.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Dust-Me Selectors 2.2 yukarıdaki yorumun aksine Firefox 3.6 ile uyumludur (ben yeni kurdum).

Sadece sayfada kullanılmış CSS'yi alarak tam olarak istediğiniz şeyi yapan ve panonuza kopyalamanıza izin veren en iyi araç, CSS Kullanılan bu Chrome uzantısıdır

Güzel Resim Örneği

Bunlar umut verici görünüyor:

• Kullanılmayan - CSS.com - Web sitenizi örten ve sonuçları size e-posta ile gönderen hizmet
• CSS Kullanımı - Firebug eklentisi

(Firefox için değil ama belki bu birine yardımcı olabilir)

Chrome üzerinde çalışıyorsanız bu uzantıyı kullanabilirsiniz:

CSS kaldır ve birleştir ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh )

• kullanılan tüm stillerle birleşik bir css indirmenize izin verir
• kullanılmayan stilleri açılır pencerede gösterir
• oluşturulan stilleri içerir

Ben rastladım Uncss-Online'da - Resmi olmayan sunucu, çok uygun kullanım defaya mahsus test ya için! Sanırım karşılaştığım en iyi araç.

UnCSS, kullanılmayan CSS'yi stil sayfalarınızdan kaldıran bir araçtır. Birden çok dosyada çalışır ve Javascript'in enjekte ettiği CSS'yi destekler. Bu şekilde kullanılabilir:

• HTML ve CSS'nizi kopyalayıp sağlanan kutulara yapıştırın
• Tıklama düğmesi
• Sihrin gerçekleşmesini bekleyin
• Kullanılmayan CSS gitti, gerisini al ve kullan!

Bu aracı kullanmanın diğer gelişmiş yolları için Github Sayfalarına bakabilirsiniz.

SnappySnippet

SnappySnippet adında açık kaynak kodlu bir Chrome reklamı var. Diğerlerinden çok daha iyi buldum, sadece zaten mevcut olan geliştirici araçlarını chrome'da genişletiyor. Hatta sayfanın yalnızca bir bölümünü ayıklayabilirsiniz tüm ilgili css. Bak bu stackoverflow yazı

İşte JavaScript kullanan çözümüm:

    var css = [];
    for (var i=0; i<document.styleSheets.length; i++)
    {
        var sheet = document.styleSheets[i];
        var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
        if (rules)
        {
            css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
            for (var j=0; j<rules.length; j++)
            {
                var rule = rules[j];
                if ('cssText' in rule)
                    css.push(rule.cssText);
                else
                    css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
            }
        }
    }
    var cssInline = css.join('\n')+'\n';

Sonunda, cssInlinesayfanın tüm çelik sayfalarının ve içeriklerinin metinsel bir listesi var.

Misal :

    /* Stylesheet : http://example.com/cache/css/javascript.css */
    .javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
    .javascript { color: rgb(172, 172, 172); }
    .javascript .imp { font-weight: bold; color: red; }

    /* Stylesheet : http://example.com/i/main_master.css */
    html { }
    body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
    a { color: rgb(204, 0, 51); text-decoration: none; }
    a:hover { color: rgb(153, 153, 153); text-decoration: none; }
    .icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
    #header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
    #super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
    #monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
    #header a { color: rgb(255, 255, 255); }
    #menu_2 { height: 290px; }

    /* Stylesheet : [inline styles] */
    .hidden { display: none; }

• uncss: Kullanılmayan CSS'yi Bul - cli aracı, phantomj'leri kullanır ve sayfada JS'yi çalıştırır, URL'lerde kullanılabilir
• grunt-uncss - yalnızca statik dosyalarda çalışır
• ( kritik css - tarayıcı penceresinde görünen öğeler için CSS'yi çıkarır)

PurifyCSS'yi kontrol edin ve bu CLI veya Gulp / Grunt / Webpack ile başa çıkabilenler için

Sınıflar javascript tarafından enjekte ediliyor olsa bile, kullanılmayan stili tek sayfadan veya birden çok sayfadan veya tüm projeden kaldırabilirsiniz.

Google'ı yapabilirseniz, PurifyCSS hakkında bilgi edinebileceğiniz tonlarca kaynak vardır.

Bu Firefox eklentisi muhtemelen sorununuzu çözecektir, Dust-Me Selectors . Ayrıca CssCleaner veya CssHelper adında küçük bir masaüstü uygulaması da var, ancak bunun bağlantısını bulamadım ... (makinemde uzun zaman önce benzer bir görev için indirilmesini sağlayın)

Tek sayfalarla uğraşıyorsanız, yalnızca web sayfası tarafından gerçekten kullanılan CSS'yi hızlı bir şekilde almak için yer imi uygulamamı da kullanabilirsiniz:

1. Buraya gidin (bu bağlantı kopmuşsa, bunu pastebin'den de alabilirsiniz ).
2. "Yer İşareti İndir" altındaki büyük düğmeyi yer imleri araç çubuğunuza sürükleyin.

Bu kadar. Şimdi, statik bir sayfayı kapsüllemek istediğinizde (yani, onu taşınabilir hale getirmek veya kendi iframe'inden sunmayı planlıyorsanız), yer imini tıklamanız yeterlidir ve o anda kullanılan sayfadaki tüm CSS'yi bir kaplamada görüntüleyecektir. Kaplamayı kapatmak için gölgeye tıklayın.

Bu çözümün iyi bir yanı, medya sorguları da çıkarıldığı için duyarlı sayfaları desteklemesidir. Bonus olarak, medya sorguları görüntü alanı boyutuna göre sıralanır (örneğin, @media (max-width: 767px)daha sonra gelir @media (max-width: 1023px)).

Bir ihtiyaç varsa, oluşturulan CSS'yi küçültmek için bir seçenek de ekleyebilirim. Bu yer imini yalnızca kendi ihtiyaçlarım için kullandığım için geniş çapta test edilmediğinden, lütfen yorumlarda herhangi bir sorunu bildirin.

NOT: Bu yer imi uygulamasının Chrome'daki yerel dosyalarla çalışmasını --allow-file-access-from-filessağlamak için Chrome kısayol hedefine ekleyin . Misal:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Sadece basit bir js betiği olan bu aracı kullanmayı deneyin https://github.com/shashwatsahai/CSSExtractor/ Bu araç, aktif stiller için tüm kaynakları listeleyen belirli bir sayfadan CSS'nin alınmasına yardımcı olur ve kaynak olarak bir JSON'a değer olarak anahtar ve kurallar. Tüm CSS'yi href bağlantılarından yükler ve bunlardan uygulanan tüm stilleri söyler. Çıkışı herhangi bir adla bir JSON dosyasına kaydedebilirsiniz.

Hmm .. Buna, çeşitli CSS seçicilerini, CSS dosyasının sunucu tarafında ayrıştırılmasını kullanarak çıkararak ve ardından bunların her birini tarayıcıda bir jQuery seçici olarak çalıştırarak biraz kaba kuvvet atardım. Çok zarif değil ama çalışmalı mı?

Eylül 2020 itibariyle bu soru neredeyse 10 yaşında. Sağlanan çözümlerin çoğu artık çalışmıyor veya bağlantılı projeler ortadan kayboldu.

Bununla birlikte, Google artık önceliklendirme ölçütlerinden biri olarak sayfa hızını kullandığından, soru hala son derece alakalı.

Listelenen tüm bağlantılarla ilgili bir dizi araştırma yaptıktan sonra purgecss.com'u buldum . Bu, Angular, React, Vue vb. Kullanarak modern web uygulamalarında / SPA'larda kullanılmayan CSS'yi temizlemek için en iyi seçenek gibi görünüyor. Ayrıca PostCSS, Webpack, Grunt ve Gulp ile entegrasyon da var.

Ayrıca, UnCSS hala korunuyor gibi görünüyor. PurgeCSS kadar güçlüdür ancak derleme süreçlerine veya tek sayfalık javascript uygulamalarına entegre değildir.

Bir sayfada kullanılan CSS'yi almak için http://getcssusedinapage.com'u da kullanabilirsiniz . Ücretsizdir, hızlıdır ve web sitenize kopyalayıp yapıştırabileceğiniz küçültülmüş ve optimize edilmiş CSS koduyla birlikte size birçok ayrıntıyı geri verir