<body> içinde <style> olması yanlış bir fikir mi olacak?

12

Aşağıdaki kodda, kafasına sahip olmak yerine, gövde etiketi ile iç stil sayfasını yerleştirdim. Tek Sayfalı Uygulama için bunu ayrı pagespecific.css dosyasına sahip olmak yerine yalnızca o sayfaya uygulanabilen stiller için yapmayı düşünüyorum.

Ben kafa bölümünde aynı koymak değil gibi bu dezavantajı olduğu bir senaryo var mı?

<!-- myPartial.html starts here --> 
<!-- Like to keep styles unique to this html right here in this file --> 
<div>
  <style>
    body { background-color: red; }
    #myText { color: white; }
  </style>

  <span id='myText'>Hello</span>
</div>
<!-- myPartial.html ends here -->

html css

— Saran
kaynak

18

styleÖğenin içindeki bir öğe bodyHTML sözdizimi kurallarını ihlal ediyor. (HTML5 taslaklarına göre, bazı durumlarda, scopedözelliklerin mevcut olması durumunda izin verilir ; bu özellik bazı tarayıcılar tarafından desteklenir.) Öte yandan, tarayıcılar umursamaz. Ayrılma headve bodyunsurlar teoriktir.

Ancak, styleiçine yerleştirmenin tersi olarak geçersiz sözdizimini kullanarak hiçbir şey kazanmazsınız head. Tek mazeret, bazı yazma ortamlarında, herhangi bir şeyi parçalara ayırmanızı engelleyebilecek teknik sınırlamalar olacaktır head.

Bir styleöğe ile harici bir stil sayfası üzerinden linkkullanım sorunu bu soruya tamamen diktir.

— Jukka K. Korpela
kaynak

1

Cevabınızın ilk kısmı mutlaka doğru değildir .

— patricksweeney

1

@patricksweeney, bence bu bağlamda biraz teorik, ama doğru bir gözlem; cevap güncellendi.

— Jukka K. Korpela

"Tarayıcılar umursamıyor" yaklaşımım için olumlu olarak kabul ediyorum. Sayfalarım kısmi (Tek-Sayfa-Uygulama) olduğundan, <head> bölümüne, <body> içine veya vücuttaki elemanların içine koymaya çalışmamın nedeni olamaz.

— Saran

2

@Galaxy, tek sayfalık bir uygulamanın neden bir öğe içermediğini anlamıyorum head. Bir HTML sayfasında her zaman bir tane bulunur.

— Jukka K. Korpela

@ JukkaK.Korpela, soruyu cevaplamak için sorumun kod bölümünü güncelledim.

— Saran

6

(Burada SE.SX'te olduğumuz için, daha stratejik bir yaklaşım, olağan teknik hususlar için değerli bir artış olabilir.)

[önsöz] HTML5 spesifikasyonu sürekli olarak hareket eden bir hedeftir ve belirlenmiş ortak uygulamaları takip etmek için bir politikaları vardır. Geçmişte eskimiş ve diriltilmişler, başkalarının anlamını değiştirdiler, metodik tavsiyelerin vb. Odağını değiştirdiler. Spesifikasyon kutsal bir hakikat kaynağı değildir. Bazen tarayıcıların doğru olması doğaldır. [/ Başlangıç eki]

OP'nin durumu ezici bir çoğunlukla yaygın ve geçerlidir.

Teması tasarlanmış ve yüklenmiş bir CMS'niz var, tüm CSS HEAD'den düzgün bir şekilde yüklendi, o zaman orada, sayfa editörü, "kaynak moduna" geçebileceğiniz (Tanrı'ya şükür!) HTML biçimlendirmesine yazın (yapıştırın) (daha önce başka bir yerde hazırlanmış, daha uygun araçlarla). Neyse ki STYLEetiketleri bile dahil edebilirsiniz (belki bir etiket filtresindeki tesadüfi bir ihmal nedeniyle) ... Gün, birçok tekrarlayıcı ruh yok edici homurdanma işinden kurtarılır. Ancak, yine de, bir sayfa düzenleme senaryosundan sistemin HEAD öğesine müdahale etmenin hiçbir yolu yoktur.

Bu, spesifikasyonun söylediği için CSS'nizi HTML parçalarınızla doğrudan bir şekilde kullanmanıza müsaade etmeli mi?

Veya tek sayfalık bir AJAX uygulamanız var.

Uzun bir oturum için yeniden yükleme yapılmadan çalışıyor ve çeşitli rastgele kaynaklardan gelen ve rastgele ve bağımsız bir şekilde stilize edilen sendikasyon içeriği var. İlk olarak STYLE, yalnızca gömülü bir STYLEöğeyle birlikte gelmek yerine yalnızca satır içi nitelikleri kullanacak şekilde dönüştürülmesini istemek saçma olur.

Ayrıca: a) herhangi bir CSS'yi öznitelikler BODYaracılığıyla herhangi bir yere gömebilirsiniz STYLE, böylece CSS yine de "teorik olarak" yasaldır; ve b) Javascript'ten istediğiniz zaman (ve daha fazlasını) istediğiniz herhangi bir stille zaten istediğinizi yapabilirsiniz, bu nedenle CSS patolojik olarak performanssız yollarla kötüye kullanılabilir. Ve hiçbirimiz bu özelliklere asla itiraz etmeyeceğiz. W3C de öyle.

Öyleyse, STYLEiçindeki öğeler hakkında bu kadar kötülük tam olarak BODYnedir? HTML yapılarına yönelik geniş çaplı kötüye kullanım cephanemize ekleyeceği ekstra olumsuz etkiler nelerdir? Daha düşük performans mı? Muhtemelen. Ara sıra.

Bu, her tarayıcı tarafından bir nedenden dolayı desteklenen bu inanılmaz faydalı uygulamayı kaldırmak için geçerli bir neden mi? Milyon mil içinde değil!

Biz aptal değiliz. Eh, hepsi değil ya da her zaman değil ...;) Kötü performans riski olan teknikler sadece yasak olmaktan ziyade belgelenebilir . Web'in ilk günlerinde Java uygulamalarımız vardı ve hayatta kaldık. Arabalar yanlış kullanılabilir, sefalete neden olabilir, hatta yiyecek rahatsız edici, verimsiz şekillerde kullanılabilir ve yiyebilecek sürücüler ortalama bir web tasarımcısından daha aptal olabilir. Ayrıca, Sevgili W3C, endişelenmenize gerek yok: bacaklarını hala STYLEelementlerle vurmuş olan HTML tamirciliklerinin kızgın sürüleri BODYhala W3C'den sonra gidip intikam alamaz. Adresi bilmiyorlar. Ve bacakları yok.

Bu yüzden lütfen: STYLEyasal olduğunuz için sesinizi duyurun BODY! Metne itaatkar bir şekilde atıfta bulunmak, ancak mevcut durumdan daha iyi bir alternatif sunmamakta fayda yoktur. Aslında bu son çare geçici çözüm tekniği için bir tehdit.

Unutmayın: HTML5 spesifikasyonuna öneri denir .

— lunakid
kaynak

Güncellemesi: gözlük nihayet yakalanmış: STYLEolduğu artık geçerli içinde BODY! ;)

— lunakid

1

Güncelleme 2: Fikirlerini değiştirdikleri için yakalanmayan özellikler (lunakid'in bağlantısını tıklayın, güncellendi).

— Maximillian Laumeister

2

Html şartname devletler bu

Kapsamlı özniteliği olmayan bir stil öğesinin belgenin başında görünmesi sınırlıdır.

Scoped özniteliği, yalnızca stil öğesinin üst öğesinde köklenen alt ağaca uygulanması gerektiğini gösteren bir boolean değeridir.

Şu anda yalnızca Firefox kapsam dahilindeki özelliği desteklemektedir. http://www.w3schools.com/tags/att_style_scoped.asp

— crad
kaynak

5

W3schools sitesine referans olarak veya hiç atıfta bulunulmamalıdır; bkz. w3fools.com

— Jukka K.Korpela

2

Ve bu soruya cevap vermiyor.

— Jukka K. Korpela

1

Teşekkürler @ JukkaK.Korpela, kapsamlı özellik tarayıcısı desteğini gösterdiğim ilk bağlantıydı. Diğer yorum çok daha iyi bir atıf sağlar. Cevabınızı +1 yapıcı yorumlardan daha az + 1'leyin.

— crad

Spesifikasyonları işaret ettiği ve kapsam belirleme için destek eksikliğine dikkat çektiği için +1 (spesifikasyona uyması gerekir). Sanırım silahı oraya atlamadan önce cevabı okumalıydın @ JukkaK.Korpela, çok fakir. Spesifikasyondan gerçekten daha güvenilir olamazsınız ve soruyu mükemmel bir şekilde cevaplıyor. " Vücutta stil sahibi olmak yanlış bir fikir olacak mı " - " Evet öyle olacak " özelliğine göre.

— Fergus In London

1

Css'nizin bir dosyaya veya bir stil etiketine sahip olmasının birkaç teknik nedeni vardır:

Css minifier kullanma yeteneği (Minifier'ların stil etiketleri üzerinde çalıştığına inanmıyorum)
Css dosyasının tarayıcı tarafından önbelleğe alınabilmesi için.

Bir dosyayı kullanmanın fikir tabanlı bazı nedenleri:

Sass (Compass) veya Less gibi harika bir css ön işlemcisi kullanabilirsiniz.
Uygulamanıza css eklemenin iki yolunu sürdürüyorsunuz.

Kişisel tercihim, her sayfa için ayrı dosyalar tutmak için Pusula'yı kullanmak ve ardından hepsini tek bir dosyada derlemek için kullanmaktır. Bu tek dosya her sayfaya eklenecektir. Yolda dosyalar her zaman ne olursa olsun ayrılmalıdır, ancak bu arada güçlük değmez.

— pllee
kaynak