Sanırım bu sınırlı bağlamlarla ilgili bir sorun olabilir, örneğin programcı olmayan kullanıcılar tarafından kullanılan bir web sistemindeki WYIWYG editörleri , standartları takip etme olasılıklarını sınırlar. Bazen (TinyMCE gibi), içerik / kodunuzu bir textareaetiketin içine yerleştiren , editör tarafından büyük bir divetiket olarak görüntülenen bir lib . Ve bazen, bu editörlerin eski bir versiyonu olabilir.
Sanırım:
- programcı olmayan bu kullanıcıların , sistem yöneticilerine (veya kurumun webdevs'lerine) açık bir kanalı yoktur;
stylesheets . Aslında, bu anlamda sahip olacakları isteklerin sayısı dikkate alındığında, yöneticiler (veya webdevs) için pratik olmazdı.
- bu sistem eskidir ve hala daha yeni HTML sürümlerini desteklememektedir.
Bazı durumlarda, kullanım stylekuralları olmadan , çok kötü bir tasarım deneyimi olabilir. Yani, evet, bu kullanıcıların özelleştirmeye ihtiyacı var. Tamam, ama bu senaryoda çözümler ne olurdu? Bir htmlsayfaya CSS eklemenin farklı yollarını göz önünde bulundurarak, şu çözümleri varsayalım:
1. seçenek: sisteminize sorun
Sistem yöneticinizden, sisteme bazı CSS kuralları eklemesini isteyin stylesheets. Bu harici veya dahili bir CSS çözümü olacaktır. Daha önce de belirtildiği gibi, bu mümkün olmayabilir.
2. seçenek: <link>açık<body>
Kullanım harici stil sayfasını üzerinde bodyyani etiketi, kullanımını linketiketinin içine erişiminiz olan bölgede (yani olacak, sitede, iç bodyetiketi ve değil de headetiketi). Bazı kaynaklar bunun iyi olduğunu, ancak MDN gibi "iyi bir uygulama" olmadığını söylüyor :
Bir <link>öğe , body-ok olan bir bağlantı türüne sahip olup olmamasına bağlı olarak <head>veya <body>öğesinde oluşabilir . Örneğin, bağlantı tipi gövde-tamamdır ve bu nedenle gövde içinde izin verilir. Ancak, bu takip edilmesi iyi bir uygulama değildir; öğelerinizi vücut içeriğinizden ayırıp , içine koyarak daha anlamlı olur .stylesheet<link rel="stylesheet"><link><head>
Bazıları, w3schools<head> gibi bölümle sınırlandırır :
Not: Bu öğe yalnızca kafa bölümüne gider, ancak istediğiniz sayıda görünebilir.
Test yapmak
Burada test ettim (masaüstü ortamı, bir tarayıcıda) ve benim için çalışıyor. Bir dosya oluşturun foo.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
Ve sonra aynı dizinde bir CSS dosyası denir bar.css:
.test1 {
color: green;
};
Kurum sisteminde bir yere nasıl bir CSS dosyası yüklerseniz bu mümkün görünecektir. Belki de durum böyledir.
3. seçenek: <style>açık<body>
Kullanım internet stil sayfası üzerindeki bodyetiketi, yani kullanımı styleerişiminiz olan alan içinde etiketinin (içerde, sitede olacak bodyetiketinin olup headetiketi). Bu nedir , Charles Salvia 'ın ve Sz işte cevapları hakkındadır. Bu seçeneği belirlerken endişelerini göz önünde bulundurun.
4., 5. ve 6. seçenekler: JS yolları
Uyarı Bunlar <head>, sayfanın öğesinin değiştirilmesiyle ilgilidir . Belki bu olmaz kurumun sistem yöneticileri tarafından izin verilebilir. Bu yüzden, önce onlara izin istemeniz önerilir.
Tamam, izin verilmiş varsayalım, strateji <head> . Nasıl? JavaScript yöntemleri.
4 seçenek: yeni <link>üzerinde<head>
Bu, 2. seçeneğin başka bir sürümüdür. Kullanım harici stil sayfasını üzerinde <head>yani etiketi, kullanımını <link>elemanı dışındaki erişiminiz olan bölgede (yani olacak, sitede, içinde değil bodyiç etiketi ve evet headetiketi). Bu çözüm , yukarıda belirtildiği gibi MDN ve w3schools'un 2. seçenek çözümü üzerindeki tavsiyelerine uygundur . Yeni bir Linknesne oluşturulacak.
JS ile konuyu çözmek için birçok yol var, ancak aşağıdaki kod dizilerinde basit bir örnek gösterdim.
Test yapmak
Burada test ettim (masaüstü ortamı, bir tarayıcıda) ve benim için çalışıyor. Bir dosya oluşturun f.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
İçinde scriptetiketi:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
Ve sonra CSS dosyasında, aynı dizinde bar.css(2. seçenekte olduğu gibi) denir :
.test1 {
color: green;
};
Daha önce de söylediğim gibi: bu, kurum sisteminde bir yere nasıl bir CSS dosyası yüklerseniz mümkün olacaktır.
5 seçenek: yeni <style>üzerinde<head>
Yeni kullanın iç stil sayfası üzerinde <head>yani etiketi, yeni bir kullanımını <style>elemanı dışındaki erişiminiz olan bölgede (yani, sitede değil içinde olacaktır bodyiçindeki etiketi ve evet headetiketi). Yeni bir Stylenesne oluşturulacak.
Bu JS ile çözüldü. Basit bir yol aşağıda gösterilmiştir.
Test yapmak
Burada test ettim (masaüstü ortamı, bir tarayıcıda) ve benim için çalışıyor. Bir dosya oluşturun foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
İçinde scriptetiketi:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
6. seçenek: mevcut bir seçeneği kullanma <style> üzerinde<head>
Varolan kullan iç stil sayfası üzerinde <head>yani etiketi, bir kullanımı <style>elemanı dışındaki alana erişiminiz olan (yani olacaktır sitesinde, değil iç bodyetiketi ve evet iç headetiketi), bazı varsa. Yeni bir Stylenesne oluşturulacak veya bir CSSStyleSheetnesne kullanılacaktır (burada benimsenen çözüm kodunda).
Bu bir açıdan risklidir.
Birincisi , çünkü bazı <style> nesneler olmayabilir . Bu çözümü uygulama şeklinize bağlı olarak, undefinedgeri dönebilirsiniz (sistem harici stil sayfası kullanabilir ).
İkincisi , çünkü sistem tasarımı yazarının çalışmasını düzenleyeceksiniz (yazarlık sorunları).
Üçüncüsü , kurumunuzun BT güvenlik politikasında buna izin verilmeyebilir. Bu nedenle, bunu yapmak için izin isteyin (diğer JS çözümlerinde olduğu gibi) .
Diyelim ki yine izin verildi:
Bu şekilde mevcut yöntemin bazı kısıtlamalar dikkate almak gerekir: insertRule(). Önerilen çözüm varsayılan senaryoyu ve stylesheetvarsa ilk işlemi kullanır .
Test yapmak
Burada test ettim (masaüstü ortamı, bir tarayıcıda) ve benim için çalışıyor. Bir dosya oluşturun foo_bar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
İçinde scriptetiketi:
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
Kullandığı bu çözüme başka bir yaklaşım CSSStyleDeclaration (en docs nesne W3Schools'da ve MDN'yi ). Ancak, sistemin CSS'sindeki mevcut kuralları geçersiz kılma riski göz önüne alındığında ilginç olmayabilir.
7. seçenek: satır içi CSS
Satır içi CSS kullan . Bu, sayfa boyutuna (kod satırlarında) bağlı olarak, kodun bakımı (yazarın kendisi veya atanan diğer kişi tarafından) çok zor olsa da, sorunu çözer.
Ancak kurumdaki rolünüzün içeriğine veya web sistemi güvenlik politikalarına bağlı olarak, bu sizin için benzersiz bir çözüm olabilir.
Test yapmak
Bir dosya oluşturun _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Gagan'ın sorduğu soruyu kesinlikle cevaplamak
Bir tarayıcının bitişik olmayan css'i nasıl oluşturması gerekir?
- Bir sayfadaki tüm css stillerini kullanarak bir veri yapısı oluşturması ve bunu oluşturma için kullanması gerekiyor mu?
- Yoksa stil bilgilerini kullanarak gördüğü sırayla mı oluşturuyor?
(alıntı uyarlanmıştır)
Daha doğru bir cevap için Google'a şu makaleleri öneriyorum:
- Tarayıcılar Nasıl Çalışır: Modern web tarayıcılarının perde arkası
- Ağaç Oluşturma, Yerleşim ve Boya
- Bir Web Sayfasını “Oluşturmak” Ne Anlama Gelir?
- Tarayıcı oluşturma nasıl çalışır - perde arkasında
- Görüntüleme - HTML Standardı
- 10 Yorumlama - HTML5