Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dynamiczne generowanie styli CSS
Forum PHP.pl > Forum > PHP
Pilsener
Witajcie!

Przeglądając wiele różnych CMS'ów czy skryptów zaintrygowało mnie jedno - kod HTML prawie w całości jest generowany dynamicznie, dlaczego zatem wciąż używa się statycznych plików .css? Zazwyczaj style są traktowane w taki sposób:
- statyczne arkusze w zewnętrznych plikach .css, które można edytować
- style dodawane są wewnątrz kodu HTML

Jednak nie spełnia to następujących założeń:
- style tylko i wyłącznie w zewnętrznym pliku .css
- możliwość zdefiniowania mediów - np. chcę oddzielny styl dla drukarki, a oddzielny dla projektora
- liczba plików .css nie przekracza jednego dla każdego z mediów
- przeglądarka wczytuje tylko te style, które są niezbędne na danej stronie
- użytkownik musi mieć łatwy dostęp do styli, dobrze by było jakby miał je ponazywane, poopisywane, skatalogowane i przypisane do poszczególnych elementów strony, klikam np. właściwości kategorii 1.3.5 i wyświetla się lista dołączonych styli wraz z nazwami i opisami, za co który odpowiada, klikam dalej i od razu mogę edytować dany styl zamiast szukać go po całym pliku (lub wielu plikach)

Jedyny sposób, aby spełnić powyższe to dynamicznie generować style css przy pomocy php i mysql, jednak tutaj mam pytania:

1. Czy takie założenia są złe lub niezgodne z teorią nowoczesnego projektowania aplikacji generujących strony www? Prośba do Was oczywiście o opinie wynikające z Waszego doświadczenia.

2. W jaki sposób dynamicznie tworzyć style?
a ) stosować kod php traktując pliki .css jak zwykłe pliki .php
b ) po prostu generować plik .css poprzez choćby file_put_contents
c ) nie ma znaczenia wybór metody, obie powyższe są równie dobre (dlatego lepiej wybrać b ze względu na to, że nie każdy hosting umożliwia nam parsowanie plików .css)
d ) inny sposób?

3. W jaki sposób zaimplementować cache?
a ) dla każdej strony tworzymy komplet statycznych plików .css
b ) pobieramy style z cache wybranej kategorii/podkategorii/strony i dopiero z nich tworzymy pliki .css
c ) nie ma znaczenia, obie metody są równie dobre
d ) inny sposób?

W metodzie a zmieniają się linki do plików css a nie same pliki, natomiast w metodzie b odwrotnie - linki są stałe, natomiast plik .css jest tworzony de novo za każdym żądaniem. Cache kategorii/podkategorii rozumiem jako plik tekstowy w postaci tablicy zserializowanej. Metoda a wydaje się wydajniejsza, jednak jest bardziej skomplikowana w implementacji, jeśli nie ma większej różnicy w wydajności wolałbym b.

Z góry dzięki za wszystkie konstruktywne odpowiedzi.
piotr94
ja bym w takiej sytuacji stworzył skrypt php, który zachowywałby się jak plik css i linkował go poprzez link rel=""...
co do cacheowania - zapisywał bym cały css dla danej strony w pliku php, i potem skryptem jaki opisałem powyżej zamiast generować np. na podstawie Bazy Danych includować tylko odpowiedni plik
Vengeance
Cytat
Zazwyczaj style są traktowane w taki sposób:
- statyczne arkusze w zewnętrznych plikach .css, które można edytować
- style dodawane są wewnątrz kodu HTML


Bluźnisz ;] Jak ktoś stron nie umie robić to tak to może wygląda...
Dla mnie w 99.9% nie ma potrzeby generowania dynamicznie styli. Do wszystkiego służy kaskadowość, nazywanie elementów po ID, klasami itd...
dla różnych mediów też są przecież odpowiednie atrybuty w tagu <link>.
Oto chodzi aby pobrać raz CSS i mieć go lokalnie w cache. Tutaj jest to możliwe do zrobienia.

W przypadku HTMLa z dynamicznym generowaniem chodzi o coś zupełnie innego.
Ps. dynamiczne generowanie CSSa, można z powodzeniem zastąpić nadmiarowymi regułami CSSa i dynamiczne dodawaniem odpowiednich klas do tagów HTMLa
erix
Lepiej jest zrobić jeden większy plik CSS pobierany tylko raz, niż kilka małych, pobieranych kilkukrotnie.

Połączenia TCP są zasobożerna, o tym że takie rozwiązanie uniemożliwia cache - nie wspomnę.
mad/
Ja zdecydowanie polecam wszystkie strony, które będą wykorzystywać kod CSS podpiąć pod jeden szablon, konkretnie postarać się by każda miała kod w stylu:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="link-do-arkusza.css" media="all" charset="utf-8" title="" alternate="no"?>
<?xml-stylesheet type="text/css" href="link-do-arkusza-screen.css" media="screen" charset="utf-8" title="" alternate="no"?>
<?xml-stylesheet type="text/css" href="link-do-arkusza-screen-termat-1.css" media="screen" charset="utf-8" title="Temat 1" alternate="no"?>
<?xml-stylesheet type="text/css" href="link-do-arkusza-screen-termat-2.css" media="screen" charset="utf-8" title="Temat 2" alternate="yes"?>
<?xml-stylesheet type="text/css" href="link-do-arkusza-print.css" media="print" charset="utf-8" title="" alternate="no"?>
<!DOCTYPE html PUBLIC "-//W3C DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" dir="ltr">
<head>
<title>Tytuł</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=&quotutf-8&quot;"/>
<meta http-equiv="Content-Language" content="pl"/>
</head>
<body>
<div id="all">
<div id="tresc">
...
</div>
<div id="menu">
...
</div>
<div id="stopka">
...
</div>
</div>
</body>
</html>
i masz załatwie wszystko, co chcesz, plik css zdecydowanie powinien być statyczny. To dobrze zaprojektowany xhtml pozwoli Ci napisać łatwy css, który będzie mieć zdefuniowane wszystko, co występuje na stronie.
Pilsener
Cytat
nie ma potrzeby generowania dynamicznie styli. Do wszystkiego służy kaskadowość, nazywanie elementów po ID, klasami itd... dla różnych mediów też są przecież odpowiednie atrybuty w tagu <link>

Cytat
Lepiej jest zrobić jeden większy plik CSS pobierany tylko raz, niż kilka małych, pobieranych kilkukrotnie

Cytat
będzie mieć zdefuniowane wszystko, co występuje na stronie


Obawiałem się kwestionowania idei dynamicznego generowania styli, może nie wszyscy mają tak konserwatywne podejście winksmiley.jpg

A jak mamy serwis, gdzie np. każda kategoria posiada inny wygląd, a kategorii kilkaset? Innych styli wymaga cały serwis, innych dana kategoria a jeszcze inne są tylko dla danych artykułów czy publikacji, jak dasz użytkownikowi możliwość edycji wybranych styli css dla danej kategorii? Atrybuty w <link> nie rozwiązują problemu, klient np. pisze publikacje makroekonomiczną i chce ją pokazać na projektorze oraz drukować, jak to rozwiązać? Z autopsji wiem, że arkusz css szybko się rozrasta, potrzeba ich kilku a czy to wydajne? I jak są wczytywane wszystkie style to jak zapobiegać ich konfliktom i zapewnić przejrzystość kodu?

Jeśli chodzi o małe serwisy to ok - jeden arkusz jest w stanie ogarnąć all, ale nie wyobrażam tego sobie dla dużego wortalu. Zauważyłem, że sporo koderów radzi sobie używając @import - importujemy jeden arkusz, który importuje kolejne i tak dalej - czy dynamiczne .css nie rozwiążą ich problemu?

Może spróbujemy z drugiej strony - jakie widzicie wady związane z dynamicznym generowaniem styli? Czy znacie jakiś niekomercyjny system (najlepiej CMS), który opiera się na takim rozwiązaniu?
seth-kk
to podejscie jest bardziej praktyczne niz konserwatywne
jesli wortal ma kilkaset rodzajow kategorii to znaczy ze jest niespojny, wprowadza dezorientacje itp (graficy i ludzie od uzytecznosci pewnie znajda jeszcze lepsze powody)
lepsze od edycji styli jest podsowanie gotowych zestawow - latwiej zapanowac nad powaznym wygladem strony/prezentacji/czegokolwiek
dynamiczna obsluge styli widzialem w produktach ilance ale jesli dobrze pamietam sprowadzala sie do podawania "dynamicznych styli" w naglowku strony i nie grzeszyla pomyslowoscia
pomimo wielu powodow dla ktorych moznaby tworzyc dynamiczne arkusze styli nie widze zadnego dosc dobrego by warto bylo to robic (a jak dota zdazalo mi sie nawet sterowac menu za pomoca statycznych styli (bez js))
erix
Cytat
Może spróbujemy z drugiej strony - jakie widzicie wady związane z dynamicznym generowaniem styli? Czy znacie jakiś niekomercyjny system (najlepiej CMS), który opiera się na takim rozwiązaniu?

Napisałem w poprzednim poście. winksmiley.jpg

CMS Ci nie podam, ale praktycznie wszystkie najpopularniejsze serwisy dotknięte problemem dużego obciążenia korzystają z jednego wspólnego CSS, nie generując dodatkowo czegokolwiek. A, i daruj sobie rozdzielanie na pliki. winksmiley.jpg Im mniej połączeń HTTP, tym lepiej.
Pilsener
No dobrze, weźmy np. te menu - masz ich do wyboru kilka, nie prościej by było aby każde menu miało przypisane style CSS w bazie? Użytkownik wybiera np. menu nr 3, klika i już o style się nie martwi. A przy statycznych arkuszach trzeba albo dodać z góry css dla każdego menu albo przy każdej zmianie wywalać stary kod css a wrzucać nowy. Podobnie jest np. z modułami - gdy do kilku kategorii dołączam powiedzmy galerię zdjęć mogę
- albo podpiąć dodatkowy arkusz (jednak wiele arkuszy to nie jest wydajne, trudno aby każdy moduł miał własny arkusz css) lub
- wrzucić wszystko do jednego głównego arkusza, przez co style galerii będą tam tkwiły choć będą używane może na 5% podstron (co niepotrzebnie zwiększa rozmiar strony, utrudnia edycje właściwego stylu i powoduje konflikty pomiędzy klasami) lub
- pójść w stronę przygotowania wielu arkuszy, po jednym dla każdej kategorii co jednak strasznie komplikuje zmiany globalne w serwisie (trzeba by edytować wiele arkuszy, niewykonalne przy statycznym podejściu)

Cytat
sprowadzala sie do podawania "dynamicznych styli" w naglowku strony i nie grzeszyla pomyslowoscia
- też widziałem taki patent w jakimś skrypcie, tyle że on polegał na wrzucaniu styli in-line, dlatego chcę podejść do problemu bardziej nowatorsko. Sądzę, że w dynamicznym generowaniu .css leży spory potencjał i szansa na znaczne uproszczenie zarządzania stroną.
erix
Cytat
A przy statycznych arkuszach trzeba albo dodać z góry css dla każdego menu

Właśnie wrzuca się wszystko do jednego. winksmiley.jpg

Poczytaj o specyfikacji protokołu TCP, to wtedy zrozumiesz, o co chodzi. winksmiley.jpg
seth-kk
Cytat(Pilsener @ 14.11.2009, 12:12:06 ) *
...wrzucić wszystko do jednego głównego arkusza, przez co style galerii będą tam tkwiły choć będą używane może na 5% podstron (co niepotrzebnie zwiększa rozmiar strony, utrudnia edycje właściwego stylu i powoduje konflikty pomiędzy klasami)...

dobrze zorganizowane style beda wykozystywaly te same style co inne elemnty strony (linki przyciski naglowki boksy itp) wiec trzymanie ich w jednym oddzielnym arkuszu ma sens a jesli bedzie zaczynal od globalnych elementow i konczyl na elementach poszczegolnych modulow z odpowiednimi komentarzami to bedzie nawet czytelny i przyjaznyw uzyciu
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.