Setel ulang properti tampilan CSS ke nilai default


172

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 ...


5
Sekarang mungkin menggunakan unset.
mnt


1
Saya tahu pertanyaan ini hanya bertanya tentang tampilan yang diatur ulang ke default browser tetapi bagi banyak orang yang akan mengunjungi halaman ini yang ingin mengatur ulang semua atribut kembali ke default browser menggunakan: .myclass {all: unset; } div {all: unset; } dll.
user1254723

Jawaban:


155

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.)


5
Ah, mengapa browser harus selalu sangat lambat untuk mendapatkan hal-hal yang baik dan berguna: p Dan mengapa pengguna harus upgrade sangat lambat ... lagipula, itulah yang saya inginkan!
Svish

1
@Vish: Ternyata saya salah menafsirkan apa yang initialsebenarnya. Saya telah memperbarui jawaban saya.
BoltClock

14
@Vish: CSS mendefinisikan nilai awal pada tingkat properti, bukan atas dasar per-elemen seperti yang saya pikirkan. Dalam contoh ini, nilai awal displayselalu inline( w3.org/TR/CSS21/visuren.html#display-prop ), terlepas dari apakah itu pada a divatau a span. Sebuah divelemen secara display: blockdefault sesuai dengan HTML , dan bukan CSS, jadi terserah pada stylesheet UA browser untuk mengatakan div { display: block; }.
BoltClock

1
"CSS mendefinisikan nilai awal pada tingkat properti, bukan pada basis per elemen seperti yang saya pikirkan." - Saya sebenarnya harus membaca ulang beberapa kali untuk mempercayainya. (Karena CSS tampaknya selalu diterapkan dalam konteks elemen (semacam), tidak mendukungnya di sini menyarankan sesuatu yang tidak sepele untuk dipelajari - apakah ada yang tahu alasannya?)
Sz.

1
defaultdiubah namanya menjadi revert.
Oriol

29

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


11
Perhatikan bahwa ini hanya berfungsi jika gaya ditetapkan menggunakan JavaScript atau styleatribut inline di tempat pertama. Anda tidak dapat mengganti atau menghapus deklarasi dari stylesheet menggunakan metode ini.
BoltClock

1
@BoltClock saya tidak setuju. Berikut adalah jsfiddle yang menurut saya menyangkal apa yang Anda katakan. jsfiddle.net/g45qagt3
thetallweeks

8
Maaf, penggunaan kata override saya membingungkan. Maksud saya mengatur gaya ke string kosong hanya akan menghapus gaya yang diterapkan melalui styleatribut atau JavaScript setter. Anda masih bisa mengganti deklarasi stylesheet jika Anda menetapkan nilai tertentu melalui JS, tetapi mengaturnya menjadi kosong sama dengan tidak menyetelnya sama sekali - deklarasi stylesheet akan tetap utuh. Lihat biola yang dimodifikasi: jsfiddle.net/BoltClock/g45qagt3/1
BoltClock

1
Perlu dicatat, string kosong berfungsi untuk properti apa pun, tidak hanya "tampilan"
Artur Beljajev

11

Tidak disetel display:

Anda dapat menggunakan nilai unsetyang berfungsi di Firefox dan Chrome .

display: unset;

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

5
unsetmemiliki masalah yang sama dengan initial. Nilai displayakan menjadi inline. Lihat codepen.io/Gidgidonihah/pen/mwWxEq
Gidgidonihah

OP jelas ingin mengatur ulang ke default per elemen, misalnya untuk mengatur ulang rentang ke inline dan div untuk diblokir. unsettidak akan membantu karena itu per properti dan akan selalu mengatur ulang tampilan inline. Silakan pertimbangkan untuk memperbarui jawaban Anda.
krulik

6

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.


5

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'

1
Tampaknya Anda harus benar-benar menambahkan elemen yang dihasilkan ke tag <body> untuk mendapatkan gaya yang dihitung, setidaknya di Chrome.
dimplex

4

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.