Setel ulang properti tampilan CSS ke nilai default

Apakah mungkin untuk menimpa properti tampilan dengan nilai defaultnya? Sebagai contoh jika saya telah mengaturnya ke none dalam satu gaya, dan saya ingin menimpanya dengan berbeda dengan default-nya.

Atau apakah satu-satunya cara untuk mengetahui apa default dari elemen itu dan kemudian mengaturnya? Ingin tidak perlu tahu apakah elemen tersebut biasanya blok, inline atau mana ...

Gaya default browser ditentukan dalam stylesheet agen penggunanya, sumber yang dapat Anda temukan di sini . Sayangnya, spesifikasi Cascading dan Inheritance level 3 tampaknya tidak mengusulkan cara untuk mereset properti style ke default browser-nya. Namun ada rencana untuk memperkenalkan kembali kata kunci untuk ini di Cascading dan Inheritance level 4 - kelompok kerja belum menentukan nama untuk kata kunci ini (tautan saat ini mengatakan revert, tetapi belum final). Informasi tentang dukungan browser untuk revertdapat ditemukan di caniuse.com .

Meskipun spesifikasi level 3 memperkenalkan initialkata kunci , menetapkan properti ke nilai awalnya akan menyetelnya kembali ke nilai defaultnya seperti yang didefinisikan oleh CSS , bukan seperti yang didefinisikan oleh browser . Nilai awal displayadalah inline; ini ditentukan di sini . Kata initialkunci merujuk pada nilai itu, bukan peramban bawaan. Spek itu sendiri membuat catatan ini di bawah allproperti :

Misalnya, jika seorang penulis menentukan all: initialpada elemen itu akan memblokir semua warisan dan mengatur ulang semua properti, seolah-olah tidak ada aturan yang muncul di tingkat kaskade penulis, pengguna, atau agen pengguna.

Ini dapat berguna untuk elemen root dari "widget" yang termasuk dalam halaman, yang tidak ingin mewarisi gaya halaman luar. Perhatikan, bagaimanapun, bahwa gaya "default" apa pun yang diterapkan pada elemen tersebut (seperti, misalnya display: blockdari lembar gaya UA pada elemen blok seperti <div>) juga akan terhapus.

Jadi saya kira satu-satunya cara saat ini menggunakan CSS murni adalah dengan mencari nilai default browser dan mengaturnya secara manual:

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

(Alternatif untuk yang di atas adalah div.foo:not(.bar) { display: inline-block; }, tetapi itu melibatkan memodifikasi pemilih asli daripada menimpa.)

Jika menggunakan javascript diizinkan , Anda dapat mengatur displayproperti menjadi string kosong. Ini akan menyebabkannya menggunakan default untuk elemen tertentu.

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

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

Berikut ini tautan ke jsbin .

Ini bagus karena Anda tidak perlu khawatir tentang jenis display untuk kembali ke ( block, inline, inline-block, table-cell, dll).

Tapi, ini membutuhkan javascript, jadi jika Anda mencari solusi css saja, maka ini bukan solusi untuk Anda.

Catatan: Ini mengesampingkan gaya sebaris, tetapi bukan gaya yang diatur dalam css

Tidak disetel display:

Anda dapat menggunakan nilai unsetyang berfungsi di Firefox dan Chrome .

display: unset;

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

Tidak, itu umumnya tidak mungkin. Setelah beberapa kode CSS (atau HTML) menetapkan nilai untuk properti pada suatu elemen, tidak ada cara untuk membatalkannya dan memberi tahu browser untuk menggunakan nilai defaultnya.

Tentu saja mungkin untuk menetapkan nilai properti yang Anda harapkan sebagai nilai default. Ini mungkin bekerja lebih luas jika Anda memeriksa bagian Rendering HTML5 CR, sebagian besar mencerminkan apa yang sebenarnya dilakukan browser.

Namun, jawabannya adalah "Tidak", karena browser mungkin memiliki nilai default apa pun yang mereka suka. Anda harus menganalisis apa alasan ingin mengatur ulang ke default; yang asli masalah mungkin masih dipecahkan.

Jika Anda memiliki akses ke JavaScript , Anda dapat membuat elemen dan membaca gayanya yang dihitung.

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'

Mengenai jawaban oleh BoltClock dan John, saya pribadi memiliki masalah dengan kata kunci awal saat menggunakan IE11. Ini berfungsi baik di Chrome, tetapi di IE tampaknya tidak berpengaruh.

Menurut jawaban ini, IE tidak mendukung kata kunci awal: Tampilan Div: awal tidak berfungsi sebagaimana dimaksud pada ie10 dan chrome 29

Saya mencoba mengaturnya sebagai gantinya seperti yang disarankan di sini: cara mengembalikan kembali ke normal setelah tampilan: tidak ada untuk baris tabel

Ini berhasil dan cukup baik untuk skenario saya. Tentu saja untuk menetapkan nilai awal nyata jawaban di atas adalah satu-satunya yang baik yang bisa saya temukan.