Neden dinamik (sunucu tarafı tarafından üretilen) CSS kullanmıyoruz?

Sunucu tarafında oluşturulan HTML önemsiz olduğundan (ve AJAX'tan önce dinamik web sayfaları oluşturmanın tek yolu buydu), sunucu tarafında oluşturulan CSS değildir. Aslında hiç görmedim. CSS derleyicileri vardır, ancak statik olarak kullanılabilecek CSS dosyaları oluştururlar.

Teknik olarak, özel bir kitaplık gerektirmez, HTML stil etiketi statik CSS dosyası yerine PHP (/ ASP / ne olursa olsun) şablon komut dosyasına başvurmalıdır ve komut dosyası CSS içerik türü üstbilgisi göndermelidir - hepsi bu.

Önbellek sorunları var mı? Ben öyle düşünmüyorum. Komut dosyası önbellek vb. Olmayan başlıklar göndermelidir . Tasarımcılar için sorun mu var? Hayır, CSS şablonunu düzenlemeleri gerekir (HTML şablonunu düzenlerken).

Neden dinamik CSS jeneratörleri kullanmıyoruz? Veya varsa, lütfen bana bildirin.

Css'nin nadiren dinamik olarak oluşturulmasının en büyük nedeni (bu javascript için de geçerlidir) önbellekleme için iyi aday olmalarıdır. CSS, sayfalarınızı stilize etmenin çok esnek bir yoludur, doğru sınıf kombinasyonuyla, CSS'de herhangi bir koşul koymak zorunda kalmadan, her türlü ipucuna göre tüm farklı sayfalarınızın farklı bölümlerini alabilirsiniz. bu sayfa görünümünde gerçekte ne olduğuna dair

Sadece CSS'nin sayfa başına farklı olması gerekmediğinden , indirme maliyetini optimize etme konusunda çok yaygın bir uygulamaya yol açar. Çoğu site, tüm site için tüm css'leri tek bir indirmeye sıkıştırır, böylece farklı sayfa görünümlerine uygulanacak parçalar yalnızca bir indirilen dosyada bulunur. Önbellekleme ile müşterilerinizin ikinci kez indirmesini beklemek zorunda kalmazlar. Belki daha da önemlisi, bir içerik sağlayıcı olarak, içeriği bir kereden fazla yükleme maliyetini ödemek zorunda değilsiniz; ve statik css'i, statik içerik sunmak için daha uygun olan ve uygulama sunucularınızdaki gerçek dinamik içerik için kaynakları serbest bırakan bir sunucuya bile koyabilirsiniz.

Bu uygulama o kadar yaygındır ki, birçok tarayıcı css'nin statik olduğunu varsayar ; ve vardır çok zaten sahip oldukları indir CSS isteksiz; kullanıcılar sayfayı yeniden yüklese bile. Bu özel tedavi sadece CSS için geçerlidir; diğer içerik türleri beklendiği gibi yeniden yüklenir.

Varsayımınızın yanlış olduğuna inanıyorum: son projemde, uygulama ajax tarafından yüklenen sunucu tarafından oluşturulan CSS kullanıyordu (çünkü haritanın konumuna bağlı olarak, sayfa tamamen farklı stillerle işaretlenmişti).

Bununla birlikte, ajax tarafından fazladan CSS almanın sorunu çözeceği kullanım durumları oldukça nadirdir, bu yüzden bununla hiç karşılaşmamış olabilirsiniz: dağıtım zamanında (LESS + minimizasyon) önceden işlenmiş ve önbelleğe alınabilir bir dizi stil sayfasını korumak genellikle daha kolaydır. örneğin, bir sonraki sayfa daha önce önbelleğe aldığı stil sayfasını yeniden kullanabilecektir, bu nedenle başlangıç ​​zamanı daha kısadır).

Aslında, dinamik CSS için kullanım örnekleri vardır. Üç farklı türde çalıştım:

1. Daha Az - Daha Az CSS temel olarak "değişkenler, karışımlar, işlemler ve işlevler gibi dinamik davranışlar" ekleyen bir CSS dil uzantısıdır. Ayrıca çok kullanışlı olan "iç içe kurallar" a izin verir. CSS yazımını bazı tekrarları ortadan kaldırarak daha az ayrıntılı yapmak için Daha Az kullandım.

2. URL yeniden yazma - Sadece önbellek sorunu olmadığını ifade etmek için, PHP'yi uzun zamandır doğru önbellek başlıklarına sahip CSS dosyaları olarak sunmak için PHP'yi kullandım. Ben esas olarak web kökü içinde olmayan kütüphanelerden CSS dosyaları sunmak için yapıyorum.

3. Dinamik raporlar - Üzerinde çalıştığım bir projede, sistemdeki her türlü veri için bir rapor oluşturucumuz vardı. styleEsas olarak rapor oluşturucuda kullanıcı tarafından seçilen renkler için dinamik etiket kurallarının çıktısını ( bahsettiğiniz gibi etiketlerin içine ) çıkarırız.

^{Not: CSS'yi doğrudan bir URL'ye verirken ( 1 veya 2'deki gibi) ve bunu zaten bir komut dosyası tarafından oluşturulmakta olan bir sayfaya gömmezken, statik içerik sunması üzerine sunucuya oldukça önemli bir yük eklersiniz. Bu nedenle, büyük miktarda trafiğiniz varsa , bunu her seferinde dinamik olarak yapabilseniz bile, kullanım durumunuz izin veriyorsa statik bir dosya olarak önbelleğe almak istersiniz .}

Ama neden daha yaygın değil? Sanırım bir ana nedeni var - CSS gerçekten içerik çıktısı için tasarlanmamış. Yani büyük bir ihtiyaç yok. Kullanıcı tarafından seçilen dinamik renkleri ya da muhtemelen arka plan görüntülerini çıkarmanın ötesinde (görüntü içerikse , imgetiketi kullanmak muhtemelen iyi bir argümandır ), dinamik olarak başka ne yapmanız gerekir?

Dinamik stil değişikliklerinin çoğu, farklı statik CSS belgelerine başvurarak üretilebilir .

Bu nedenle, düşündüğünüz gibi kesinlikle mümkündür, ancak bunu yapmak için çok fazla neden yoktur.

Dinamik olarak CSS yüklemenin iki ayrı yönü var ...

1. CSS dosyasını sunucuda dinamik olarak oluşturma

   Bu oldukça basittir ve birçok web sitesi bunu yapar. CSS'nizi bazı koşullara göre değiştirirseniz bu yararlıdır. Örneğin, sitenizin temasını kullanıcının Coğrafi konumuna göre seçerseniz.

2. JS komut dosyası yükleyicisi aracılığıyla istek üzerine bir CSS dosyası yükleme

   DOM'un büyük bir bölümünü dinamik olarak oluşturup gerekli stilleri yüklerseniz bu kullanışlı olabilir. AMA LABjs'ın yazarı olarak ...

   dinamik olarak yüklenen bir CSS dosyasının yüklemeyi bitip bitmediğini belirlemek aslında oldukça karmaşıktır ve çapraz tarayıcı yapmak zordur. "Yük" olayları biri umut / beklendiği gibi ateş etmez. bu nedenle böyle bir destek eklemek LABjs'a önemsiz bir boyut ekleyecektir

1. Biz bunu yaparız. Her zaman. Özellikle renklerin vs. veritabanından geldiği SaaS uygulamasında müşteriye özel markalaşma gibi şeyler için.
2. Dağıtımdan önce veya sırasında veya uygulamanın önyükleme aşaması varsa uygulama önyüklemesi sırasında CSS'yi önceden oluşturmak çok daha hızlıdır (kullanıcının bakış açısından). Genellikle mümkün olduğunda statik CSS dosyalarını önceden oluşturmayı tercih ederiz.
3. Maksimum hız için (kullanıcının bakış açısından), bir CDN'ye statik CSS dosyaları dağıtmak ve tarayıcının bunları uygulama sunucularınız yerine CDN'den almasını sağlamak en iyisidir. Bu genellikle yalnızca CSS dosyaları dağıtımdan önce veya dağıtım sırasında önceden oluşturulabiliyorsa ve dağıtımın bir kısmı önceden oluşturulmuş statik CSS dosyalarını CDN'ye iletiyorsa mümkündür. CDN'ler artık çok ucuz ve kullanımı kolay - Amazon'un CloudFront ve Rackspace Bulut Dosyalarına göz atın.

Önbellek sorunları var mı? Ben öyle düşünmüyorum. Komut dosyası önbellek vb. Göndermelidir.

Her şey çok iyi, ancak bu, her sayfa yüklediğinde kullanıcıdan indirmesini istediğiniz önemli bir genel statik bilgidir. Yani bunun için iyi bir sebebin olsa iyi olur.

Şimdi bu sebep ne olabilir?

Bir stili çeşitli parametrelere göre değiştirmek istiyorsanız, bunu birden çok stil sayfasına sahip olarak ve doğru olanı indirmek için HTML oluşturarak yaparsınız.

Dinamik CSS oldukça önemsizdir ve uygulamaları daha sınırlı olmasına rağmen (statik bir stil sayfası ile dinamik olarak oluşturulan HTML'nin günlük ihtiyaçları nasıl çözdüğünü görmek ve CSS'nin kendisi yarı-dinamik elde etmek için birkaç mekanizma içerir), ' birçok durumda kullanıldığını gördüm ve ne zaman ihtiyacım olursa kendim kullanıyorum.

Genellikle, 'dinamik' bölüm birkaç stil sayfasını bir araya getirmekten (HTTP isteklerinin sayısını azaltmak için) ve bunları küçültmekten (bant genişliği kullanımını azaltmak için), ancak değişken değiştirme gibi basit şeylerden (ör. stil sayfası) hayatınızı çok daha kolay hale getirebilir. Bununla birlikte, CSS'nin az sayıda uyarıyla oldukça basit bir sözdizimi olduğundan, genel amaçlı bir metin işleme sistemi veya PHP gibi komut dosyası dili genellikle bunun için yeterlidir, bu yüzden çok sayıda hazır CSS işleme sistemi görmezsiniz.

Belki onları tanımadan vahşi doğada görmüşsünüzdür. Dinamik komut dosyaları gönderen sunucular, URL'nin statik olarak sunulan içerikten ayırt edilemez hale gelmesi için genellikle URL yeniden yazma özelliğini kullanır. Bu, bazı tarayıcıların (özellikle IE) belirli koşullar altında doğru MIME türü algılaması için uzantılara güvenmesi ve göndermiş olabileceğiniz İçerik Türü başlıklarını yok sayması (veya atması) nedeniyle gereklidir.

Önbelleğe alma ile ilgili olarak: Stil sayfaları GET istekleriyle alınır ve bunları önbelleğe alınabilir hale getirmek iyi bir kullanıcı deneyimi için kesinlikle önemlidir. Her istek üzerine stil sayfasını yeniden indirdiğinden sayfanın yeniden akışını izlemek istemezsiniz. Bunun yerine, stil sayfası işleminizin çıktısını değiştiren tüm parametreleri sorgu dizesine koymalısınız; farklı bir sorgu dizesi farklı bir URL verir, bu da önbellek kaybına neden olur, bu nedenle parametreler her değiştiğinde, istemci her şeyi önbelleğe alsa bile stil sayfası yeniden indirilir. Her istek için potansiyel olarak farklı olan ve yan etkilere bağlı olan CSS'ye gerçekten ihtiyacınız varsa, dinamik olmayan parçayı statik olarak sunulan bir stil sayfasına yerleştirmeyi düşünün ve yalnızca dinamik olması için kesinlikle gerekli olan şeyleri dinamik olarak sunun.

Dinamik CSS kullanmak isterdim, ancak çoğu zaman CSS temellerini anlamak için biraz yardıma ihtiyaç duyan tasarımcıları kullanmaktan sıkıldım. Karışımda dinamik bir dil atmak aslında bir kafanın patlamasına neden olabilir.

Buna bakmanın bir başka yolu da "başka bir adam tüm acı verici el işlerini yapıyor, gerçekten benim sorunum değil, devam ediyor."