ugrás a tartalomhoz

CSS 'based-on' style proposal

Hojtsy Gábor · 2005. Dec. 19. (H), 08.53
Javaslat explicit CSS stílus kapcsolatok megadásához
 ■
1

Gyenge

Jano · 2005. Dec. 19. (H), 15.34
Az ötlet jó de a hozott példa nagyon gyenge. Egyedül osztály kiválasztókat használ pedig lehetnek sokkal bonyolultabb CSS szabályok is. Erre mgoldást jelentene, ha ellehetne nevezni a CSS szabályokat.

body > div {
 color:pink;
 name:'brand';
}

a.tmobil {
 based-on:brand;
}
3

Osztályok

Bártházi András · 2005. Dec. 19. (H), 18.18
Valóban, azt én is furcsáltam, hogy úgy hivatkozik osztályra, hogy nincs előtte pont (meg amúgy sem biztos, hogy a legjobb ötlet egy kiválasztót használni mint forrásnevet). Ez az elnevezés dolog nekem annyira nem tetszik, de jobb ötletem nekem sincs.

-boogie-
2

Nem rossz

Bártházi András · 2005. Dec. 19. (H), 18.15
Elég szép - a CSS filozófiájához illő -, és viszonylag könnyen megvalósítható megoldásnak tűnik.

-boogie-
4

Generált CSS

attlad · 2005. Dec. 19. (H), 19.04
Aki a CSS-t átküldi egy saját feldolgozón mielőtt az a böngésző megkapná annak sok más egyéb előny mellett ezt se bonyolult beletenni.
5

Nem jó

Bártházi András · 2005. Dec. 19. (H), 22.24
Viszont az a CSS jóval nagyobb lesz, mint az eredeti (nem az egyszerű példákban, hanem nagyobb, komplex weblapokban gondolkodva). Ez a megoldás viszont tömör, egyszerű, és elég jól átlátható megoldást kínál. Persze mellette lehet használni generált CSS-t is.

-boogie-
6

Kínálna

attlad · 2005. Dec. 19. (H), 23.22
Ez a megoldás viszont tömör, egyszerű, és elég jól átlátható megoldást kínál.

Kínálna, ha lenne ilyen, de nincs, csak egy javaslat. :-)

Azt bele akartam én is írni utólag, hogy nagyobb lesz, de olyan sokat talán nem számít egy weboldalnál a CSS mérete, mivel azt ideális esetben csak egyszer kell letölteni, szóval ha kétszer nagyobb is még az se biztos, hogy olyan nagy baj.

Meg ha parsolva van előtte, akkor lehet tömöríteni, optimalizálni, ilyen szempontból meg csökkenhet a méret, bár valószínű kisebb mértékben.
7

Kínálna, mert...

Bártházi András · 2005. Dec. 19. (H), 23.34
De most a tervezésről van szó, nem arról, hogy hogyan lehet ma és még pár évig megoldani ezt a kérdéskört. :) Szóval jelen vita kapcsán teljesen irreleváns (na jó, nem az :), hogy a tárgyalt kérdéskör nélkül hogyan fogom megoldani a kérdést. Azt nagyon jól tudom, hogy milyen eszközöket lehet ma használni, viszont az erősen kitalálandó, hogy hogyan tudjuk majd életünket megkönnyíteni a jövőben a szabvány kisebb módosításával (a javasolt megoldás szépsége, hogy nagyon könnyen megvalósítható a jelenlegi böngészőmotorokkal, hiszen azok már kínálnak lehetőséget öröklődésre különböző szabályok szerint).

-boogie-
8

Öröklés

attlad · 2005. Dec. 20. (K), 00.08
Most, hogy írod, hogy öröklés már támogatott a generált CSS (szerver oldali based-on) megoldás nem is feltétlenül lesz nagyobb, csak így kell megoldani:

/* CSS template-be ezt írjuk */
.auto {
  name: auto;
  height: 50px;
  width: 300px;
  color: black;
}

.pirosauto {
  based-on: auto;
  color: red;
}

/* feldolgozás után ez lesz belőle, amit a böngésző megkap: */
.auto, .pirosauto {
  height: 50px;
  width: 300px;
  color: black;
}

.pirosauto {
  color: red;
}
9

Teccik. :)

Bártházi András · 2005. Dec. 20. (K), 00.24
Ez a megközelítés tetszik. :)

-boogie-
10

Kiküszöböli a ciklicitást

Jano · 2005. Dec. 20. (K), 01.44
Lehet, hogy csak fáradt vagyok és nem tudom jól végiggondolni, de mintha ez a fajta átírás még a ciklicitásból eredő problémát is megoldaná.
11

@ruleset

Jano · 2005. Dec. 20. (K), 02.05
Én amit még nagyon szeretnék ha gyakran használt dolgokat ki lehet pakolni mint függvényeket és csak éppen aktuális nevekkel meghívni. Pl egy 3 hasábos elrendezés vagy menünél mennyire jól jönne egy ilyen:

@ruleset cols3 {
 selector[param=1] {
  name:leftcol;
  float:left;
  width:value(param=4);
 }

 selector[param=2] {
  name:rightcol;
  float:right;
  width:value(param=5);
 }

 selector[param=3] {
  name:center;
  margin-left:value(param=4);
  margin-right:value(param=5);
 }
}

@fill_ruleset cols3("#navigation","#tools","#content","120px","150px");