CSS görüntüleme özelliğini varsayılan değerine sıfırla

Display özelliğini varsayılan değeri ile geçersiz kılmak mümkün mü? Örneğin, bir stilde hiçbirine ayarlamazsam ve varsayılanı ile farklı bir şekilde geçersiz kılmak istersem.

Ya da o öğenin varsayılanının ne olduğunu bulmanın ve sonra onu bu şekilde ayarlamanın tek yolu mu? Elemanın genellikle blok, satır içi veya hangisi olduğunu bilmek istemezsiniz ...

Tarayıcının varsayılan stilleri, kaynaklarını burada bulabileceğiniz kullanıcı aracısı stil sayfasında tanımlanır . Ne yazık ki, Basamaklı ve Devralma düzeyi 3 spesifikasyonu , bir stil özelliğini tarayıcı varsayılanına sıfırlamanın bir yolunu önermiyor gibi görünüyor. Bununla birlikte, bunun için bir anahtar kelimeyi Basamaklı ve Kalıtım düzeyi 4'te yeniden sunma planları vardır - çalışma grubu henüz bu anahtar kelime için bir isme yerleşmedi (bağlantı şu anda söylüyor revert, ancak nihai değil). Tarayıcı desteği hakkında bilgi caniuse.comrevert adresinde bulunabilir .

Düzey 3 Spec bir tanıtmak yok iken initialanahtar kelimeyi onun bir özelliğini ayarlayarak, başlangıç değeri o varsayılan değerine resetlemelerin CSS ile tanımlanan , değil tarayıcı tarafından tanımlanan . Başlangıç değeri displayIS inline; bu burada belirtilir . initialAnahtar kelime bu değerin değil, tarayıcı varsayılan ifade eder. Özelliğin kendisi bu notu allmülk altında yapar :

Örneğin, yazar all: initialbir öğeyi belirtirse , basamaklamanın yazar, kullanıcı veya kullanıcı-aracı düzeylerinde hiçbir kural görünmüyormuş gibi tüm mirasları engeller ve tüm özellikleri sıfırlar.

Bu, bir sayfada bulunan ve dış sayfanın stillerini devralmak istemeyen bir "widget'in" kök öğesi için yararlı olabilir. Bununla birlikte, söz konusu öğeye uygulanan herhangi bir "varsayılan" stilin (örneğin display: block, blok öğeleri üzerindeki UA stil sayfasından <div>) da uçacağını unutmayın.

Bu yüzden şu anda saf CSS kullanarak tek yolu tarayıcı varsayılan değerini aramak ve manuel olarak ayarlamaktır sanırım:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(Yukarıdakilere bir alternatif olabilir div.foo:not(.bar) { display: inline-block; }, ancak bu geçersiz kılma yerine orijinal seçicinin değiştirilmesini içerir.)

Javascript kullanımına izin veriliyorsa , displayözelliği boş bir dizeye ayarlayabilirsiniz . Bu, söz konusu öğenin varsayılan değerini kullanmasına neden olur.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

İşte bir jsbin bağlantısı .

Eğer (geri dönmek için ekranın farklı türleri hakkında endişe gerekmez, çünkü bu güzel block, inline, inline-block, table-cell, vs).

Ancak, javascript gerektirir, bu yüzden sadece bir css çözümü arıyorsanız, o zaman bu sizin için bir çözüm değildir.

Not: Bu satır içi stilleri geçersiz kılar, ancak css'de ayarlanmış stilleri geçersiz kılmaz

Ayarsız display:

unsetHem Firefox hem de Chrome'da çalışan değeri kullanabilirsiniz .

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

Hayır, genellikle mümkün değildir. Bazı CSS (veya HTML) kodu bir öğedeki bir özellik için bir değer ayarladıktan sonra, bu öğeyi geri almanın ve tarayıcıya varsayılan değerini kullanmasını söylemenin bir yolu yoktur.

Elbette bir özelliği varsayılan değer olmasını beklediğiniz bir değer ayarlamak mümkündür . HTML5 CR'nin Oluşturma bölümünü kontrol ederseniz , çoğunlukla tarayıcıların gerçekte ne yaptığını yansıtırsanız bu oldukça yaygın olabilir .

Yine de cevap “Hayır” dır, çünkü tarayıcılar istedikleri varsayılan değerlere sahip olabilir. Varsayılanlara sıfırlamak istemenin nedenini analiz etmelisiniz; Orijinal Sorun hala çözülebilir olabilir.

Eğer siz erişebilir JavaScript , bir unsuru oluşturmak ve bilgisayarlı tarzını okuyabilirsiniz.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

BoltClock ve John'un cevabı ile ilgili olarak, IE11'i kullanırken kişisel olarak ilk anahtar kelimeyle ilgili sorunlar yaşadım. Chrome'da iyi çalışıyor, ancak IE'de hiçbir etkisi yok gibi görünüyor.

Bu cevaba göre IE ilk anahtar kelimeyi desteklemiyor: Div ekranı: ilk ie10 ve chrome 29'da amaçlandığı gibi çalışmıyor

Burada önerildiği gibi boş ayarlamaya çalıştım: ekrandan sonra normale nasıl geri dönülür: tablo satırı için yok

Bu işe yaradı ve benim senaryom için yeterince iyiydi. Tabii ki gerçek başlangıç ​​değerini ayarlamak için yukarıdaki cevap bulabildiğim tek iyi cevaptır.