Implementacja stylów (skórek, czy jak to kto zwał) wyglądu strony

0

Dzień dobry.

Przymierzam się do zakodowania w PHP strony na podstawie statycznych plików HTML. Tzn. stworzyłem najpierw html, żeby zauważyć części wspólne między podstronami i na tej podstawie móc napisać efektywnie php. To ma być prosty CMS, z tą różnicą, że będzie opierać się o skórki tj. style (nie mylić z CSS :P ) wyglądu strony w zakresie układu elementów na stronie, wyglądu, kolorów, formatowania itp. Oczywiście część można załatwić CSS, ale mnie chodzi o coś więcej.

I teraz pytanie: W jaki sposób można przechowywać kod takich stylów? Czy są jakieś narzędzia do czytania pewnych pseudokodów i renderowania na ich podstawie strony? Wiem, że w phpBB 3.x i być może wcześniejszych też, używają własnego sposobu kodowania stylów, jak piszą:

Styles change the appearance of your board. phpBB 3.x uses a powerful templating-system that keeps the PHP code separate from the HTML code and gives you complete freedom to customise your forum the way you want it.
The default style for phpBB 3.1.x and 3.2.x is prosilver. The Styles Database contains additional styles created by members of the phpBB.com community and are available for download and installation on your phpBB board.

Oni mają pseudokod. Jakie inne albo podobne sposoby można użyć? Jak uzależnić wygląd strony od własnego, prostego sposobu kodowania stylów, tak, by móc łatwo dodawać nowe, bez konieczności przeprogramowania plików php aplikacji, a jedynie używać plików "wsadowych" :P

Dzięki
M.

3

To o czym mówisz to systemy szablonów zrobione po to by backendowe nooby mogły robić front niezależnie od backendu. Dodatkowa warstwa abstrakcji spowalniającą wykonywanie kodu niekiedy bardzo mocno jak w przypadku smarty.

3

Widziałeś kiedyś http://www.csszengarden.com ?
Prawdopodobnie jakieś 99% tego, co ci chodzi po głowie można ogarnąć samym CSS, zwłaszcza jeśli panel z CMS dostarcza wszędzie tych samych danych.

Niemniej jeśli koniecznie trzeba np. uwzględnić możliwość dodania / usunięcia na konkretnej stronie jakiegoś modułu, to używam po prostu pliku .php zawierającego szkielet zawartości strony, w którym includowane są inne pliki / zmienne.

0

Aha. A jeżeli chciałbym dać możliwość wyboru skórki userowi, to po prostu też zakodować styl jako zestaw sparametryzowanych includów, dostępnych po wybraniu przez usera danej skórki?

Chodzi o możliwość parametryzacji stylu. Nie mówię o możliwości konfiguracji każdego elementu z osobna tylko o zakodowanie powiedzmy 4 stylów i wylistowania ich w select-liscie.

Np

Skórka 1
Skórka 2
Skórka 3
Skórka 4

3

Zależy czym mają różnić się te "skórki" między sobą? Jeśli mają być bardzo różne, to najpewniej można by zrobić dwa różne widoki które nie mają ze sobą nic wspólnego. Łączenie ich to byłby błąd.

Jeśli mają się jednak różnić tylko np czcionką, kolorem albo innymi nieinwazyjnymi stylami, to lepiej dodać klasę do body, np

<body class="theme-dark">

lub

<body class="theme-light">

I napisać style dla obu, i włączać theme zmieniając klasę w body.

1
TomRiddle napisał(a):
<body class="theme-dark"> ``` lub ``` <body class="theme-light"> ```

I napisać style dla obu, i włączać theme zmieniając klasę w body.

I ładować wszystkim do przeglądarki CSS-y dla wszystkich możliwych stylów, które to CSS-y się obecnie potrafią rozrastać do megabajtów.
Nie lepiej wybierać temat, podpinając różne pliki CSS?

0
Freja Draco napisał(a):
TomRiddle napisał(a):
<body class="theme-dark"> ``` lub ``` <body class="theme-light"> ```

I napisać style dla obu, i włączać theme zmieniając klasę w body.

I ładować wszystkim do przeglądarki CSS-y dla wszystkich możliwych stylów, które to CSS-y się obecnie potrafią rozrastać do megabajtów.

A kto Ci każe zmieniać theme w runtime? Załaduj te które są używane.

A jeśli chcesz zmienić w runtime, to lazy-loading.

Nie lepiej wybierać temat, podpinając różne pliki CSS?

Raczej nie, bo wtedy ciężko będzie zmienić style bez przelwdownaia strony.

0
TomRiddle napisał(a):

Raczej nie, bo wtedy ciężko będzie zmienić style bez przelwdownaia strony.

Nie chce mi się tego teraz sprawdzać, ale jestem prawie pewna, że da się dynamicznie dołączyć nowy plik css, tak jak można dołączyć np. obrazek.

1
Freja Draco napisał(a):
TomRiddle napisał(a):

Raczej nie, bo wtedy ciężko będzie zmienić style bez przelwdownaia strony.

Nie chce mi się tego teraz sprawdzać, ale jestem prawie pewna, że da się dynamicznie dołączyć nowy plik css, tak jak można dołączyć np. obrazek.

Da się to zrobić javascript'em

function loadjscssfile(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}
 
loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

Co do samych szablonów.

Kompletny szablon dający pełne możliwości dostosowania wyglądu i interakcji to jednak

  • HTML
  • CSS
  • JavaScript

Dopiero te trzy elementy wspólnie pokrywają komplet potencjalnych potrzeb.

0
TomRiddle napisał(a):
Freja Draco napisał(a):

Nie lepiej wybierać temat, podpinając różne pliki CSS?

Raczej nie, bo wtedy ciężko będzie zmienić style bez przelwdownaia strony.

<link rel="stylesheet" type="text/css" href="../../styles/somepanel.css?cachetime=20210101132703" />

Ja tak sobie radzę.
W parametrze czas ostatniej zmiany np. wyboru skórki, w razie braku to czas loginu użytkownika
Oczywiście URL do CSS musi być realizowany kodem (nie statycznie)

Nie jest to najbardziej genialne na świecie, ale "ogarnia"

0
katakrowa napisał(a):
Freja Draco napisał(a):
TomRiddle napisał(a):

Raczej nie, bo wtedy ciężko będzie zmienić style bez przelwdownaia strony.

Nie chce mi się tego teraz sprawdzać, ale jestem prawie pewna, że da się dynamicznie dołączyć nowy plik css, tak jak można dołączyć np. obrazek.

Da się to zrobić javascript'em

function loadjscssfile(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}
 
loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

Co do samych szablonów.

Kompletny szablon dający pełne możliwości dostosowania wyglądu i interakcji to jednak

  • HTML
  • CSS
  • JavaScript

Dopiero te trzy elementy wspólnie pokrywają komplet potencjalnych potrzeb.

Stój Halina napisał(a):
TomRiddle napisał(a):
Freja Draco napisał(a):

Nie lepiej wybierać temat, podpinając różne pliki CSS?

Raczej nie, bo wtedy ciężko będzie zmienić style bez przelwdownaia strony.

<link rel="stylesheet" type="text/css" href="../../styles/somepanel.css?cachetime=20210101132703" />

Ja tak sobie radzę.
W parametrze czas ostatniej zmiany np. wyboru skórki, w razie braku to czas loginu użytkownika
Oczywiście URL do CSS musi być realizowany kodem (nie statycznie)

Nie jest to najbardziej genialne na świecie, ale "ogarnia"

No oczywiście że jeśli się uprzesz to napiszesz to tak, żeby to tak działało.

Ale po pierwsze, jak chcesz "wyłączyć" tak raz załadowany styl?

A po drugie, czemu miałbyś nie dodać nazwy klasy body do tych styli? Jeśli w jednym z nich się pomylisz, i ustawisz zbyt specyficzny styl, to w innym nie będziesz miał innego wyjścia jak tylko dodać !important. Popracuj tak trochę i wszystkie twoje pliki będą miały wszędzie importanty.

Rozumiem co mówisz, i jak najbardziej da się to zrobić tak jak mówisz - po prostu to nie jest dobre rozwiązanie.

1
TomRiddle napisał(a):

Ale po pierwsze, jak chcesz "wyłączyć" tak raz załadowany styl?

Tu piszą, że się da:
https://stackoverflow.com/questions/5033650/how-to-dynamically-remove-a-stylesheet-from-the-current-page

Chyba nawet kiedyś coś takiego robiłam.

1
Freja Draco napisał(a):
TomRiddle napisał(a):

Ale po pierwsze, jak chcesz "wyłączyć" tak raz załadowany styl?

Tu piszą, że się da:
https://stackoverflow.com/questions/5033650/how-to-dynamically-remove-a-stylesheet-from-the-current-page

Chyba nawet kiedyś coś takiego robiłam.

Nie mam ochoty ciągnąć dalej tej rozmowy, jeśli nie masz ochoty się nauczyć czegoś nowego, droga wolna.

To będzie moja ostatnia odpowiedź w tym poście.

Po pierwsze, ponawiam temat - to że coś się da zrobić, nie znaczy że się powinno. Czy można kopnąć tygrysa w dupę? Można, pytanie czy warto.

Po drugie, przeglądarki (i w ogóle renderery webowe) są zoptymalizowane do dynamicznego zmieniania klas, nadpisywania rulesetów, zmian w stylach. Czy tak samo dobrze radzą sobie z odłaodwaniemy wszystkich styli w pliku?

A po trzecie, mam wrażenie że ciągniesz tą rozmowę, nie po to żeby znaleźć rozwiązanie, tylko żeby bronić swojego początkowego zdania - da się bez klasy, to robię bez klas. A taka rozmowa prowadzi do nikąd.

Po czwarte, nie odniosłeś się do argumentu z tym że takie podejście to kula śnieżna do zasypania stylów importantami.

Dziękuję i pozdrawiam.

1
TomRiddle napisał(a):

Nie mam ochoty ciągnąć dalej tej rozmowy, jeśli nie masz ochoty się nauczyć czegoś nowego, droga wolna.

Ale, że co? Myślisz, że nigdy nie manipulowałam wyglądem potomków zmieniając klasę ich kontenera albo całego html/body?
To jest akurat najprostsza metoda zrobienia tego, o czym piszemy.

Po pierwsze, ponawiam temat - to że coś się da zrobić, nie znaczy że się powinno. Czy można kopnąć tygrysa w dupę? Można, pytanie czy warto.

Przecież wymieniłam przyczynę: brak konieczności wczytywania wszystkim wszystkich możliwych css-ów, kiedy chcesz używać tylko jednego.

Dodam jeszcze jedną przyczynę: prostsze arkusze stylów, w których nie musi przy każdym selektorze występować:
moja-zarąbista-klasa-body dopiero-tu-właściwy-element
co ułatwia tez późniejsze modyfikowanie takich deklaracji i pozwala uniknąć choćby wspomnianego !important.

Czy tak samo dobrze radzą sobie z odłaodwaniemy wszystkich styli w pliku?

Nie wiem. A masz jakieś podstawy, by zakładać, że ta nie jest? I, że jest to istotnie duża różnica?

A po trzecie, mam wrażenie że ciągniesz tą rozmowę, nie po to żeby znaleźć rozwiązanie, tylko żeby bronić swojego początkowego zdania

No. Ewidentnie ;)p

Po czwarte, nie odniosłeś się do argumentu z tym że takie podejście to kula śnieżna do zasypania stylów importantami.

Odniosłam się. Jeśli coś jest importantogenne, to właśnie zbędne wydłużanie selektora o kolejny element.

1
TomRiddle napisał(a):

Po drugie, przeglądarki (i w ogóle renderery webowe) są zoptymalizowane do dynamicznego zmieniania klas, nadpisywania rulesetów, zmian w stylach. Czy tak samo dobrze radzą sobie z odłaodwaniemy wszystkich styli w pliku?

Przypomniałam sobie. Jakieś 10 lat temu wykorzystałam ten mechanizm, żeby obsłużyć responsywność na jakimś starym IE, które nie rozumiało @media. Maszyna miała jednordzeniowy procesor 1GHz i 400 MB RAM-u. Działało płynnie.

2

Szczerze? Ja to robię w ten sposób (oczywiście za pomocą css'a stylizuję wygląd), mam plik np. light-theme (.css), tam są selektory i elementy dostosowane do jasnego motywu, dark-theme do ciemnego motywu, pink-theme do różowego. Każdy ten plik ma nazwy selektorów i elementów takie same, żeby nie było trzeba zbędnie grzebać w strukturze html i w zależności od wybranego motywu ładuje się odpowiedni plik za pomocą <link>, moim zdaniem najbardziej praktyczne rozwiązanie. Oczywiście można też się pobawić w generator stylów i renderować takie pliki na podstawie odpowiednich parametrów, ale po co? Wydłuża to czas ładowania takowej strony zwłaszcza przy większym ruchu. Ogólnie nie rozumiem koncepcji tematu, to tak jakby próbować wynaleźć coś co już wynaleziono, ale w bardziej karkołomny sposób.

1 użytkowników online, w tym zalogowanych: 0, gości: 1