[CSS] Styles kopieren?

[OmeRoon]

Weet iemand of het mogelijk is styles te kopieren?

Dus iets als dit:

code:

<style>

  .test {
      font-family: arial;
      color: #ff0000;
   }

  .test2 {
     test;
  }

</style>

Iemand enig idee?

[crisp]

waarom zou je dat willen? je kan voor een element gewoon meerdere classes opgeven:

Cascading Stylesheet:

.test { font-family: arial; color: red; }
.test2 { text-decoration: underline; }

HTML:

<span class="test test2">Rood en onderlijnt</span>

[frickY]

Dan eerder

code:

<style>
  .test, .test2 {
      font-family: arial;
      color: #ff0000;
   }
</style>

2 verschillende classnames met dezelfde eigenschappen.

[ Voor 26% gewijzigd door frickY op 13-12-2005 13:24 ]

[lt_cmd_data]

Bezoek eens http://www.w3schools.com/css/css_intro.asp
daar staat het allemaal netjes uitgelegd.

[DeFeCt]

frickY schreef op dinsdag 13 december 2005 @ 13:23:
2 verschillende classnames met dezelfde eigenschappen.

Dat lijkt me dus redelijk overbodig... Of je moet aangewezen zijn op code met bestaande classes erin.

[BasieP]

DeFeCt schreef op dinsdag 13 december 2005 @ 13:25:
[...]


Dat lijkt me dus redelijk overbodig... Of je moet aangewezen zijn op code met bestaande classes erin.

of je wilt later een van die 2 classen iets laten doen maar niet allebij (dus bijv een andere css propertie, of javascript oid)

zoiets dus:

Cascading Stylesheet:

.plaatje1, .plaatje2 {
  border: 1px solid black;
}

.plaatje2 {
  width: 20px;
}

[ Voor 15% gewijzigd door BasieP op 13-12-2005 13:33 ]

[frickY]

DeFeCt schreef op dinsdag 13 december 2005 @ 13:25:
Dat lijkt me dus redelijk overbodig... Of je moet aangewezen zijn op code met bestaande classes erin.

Lijkt mij ook, maar dat is waar in de TS om wordt gevraagd.
Ik denk dat waar de TS naar zoekt hetgene is wat crisp laat zien.. maar heb voor de zekerheid ook gewoon maar de exacte vraag beantwoord.

@BasieP
Ook dan voldoet de oplossing van crisp prima.

Cascading Stylesheet:

.test {
  border: 1px solid black;
}

.vastebreedte {
  width: 20px;
}

HTML:

[img]""[/img]

[ Voor 15% gewijzigd door frickY op 13-12-2005 13:35 ]

[SchizoDuckie]

Dat het niet kan (je kan geen standaard variabelen definiëren voor bijvoorbeeld een kleur) vind ik dus de grootste tekortkoming van heel CSS.

Als ik #A328FE als achtergrondkleur neem, en ik weet die niet uit mn hoofd zal ik dus elke keer die kleur moeten opzoeken, kopieren, en plakken naar het element waar ik dat op dat moment wil gebruiken en vooral in grote css files is dit nogal irritant en onoverzichtelijk af en toe.

Helaas, misschien in CSS4 denken ze hier nog eens over na ofzo...

[ Voor 9% gewijzigd door SchizoDuckie op 13-12-2005 13:37 ]

[Janoz]

Ikzelf los dat altijd op door mijn stylesheet te laten genereren door een serverside taal. Dan kan ik door de hele code gebruik maken van

code:

.style {
 background-color : <%=backgroundColor%>;
 color : <%=textColor%>;
}

Maar je frustratie snap ik. Hetgeen ik mis is trouwens het kunnen gebruiken van expressies voor afstanden. Al erg vaak heb ik dingen nodig gehad als (50% - 10px). Volgens mij heeft IE daar iets voor, maar met alleen een IE implementatie heb je daar weinig aan.

[frickY]

SchizoDuckie schreef op dinsdag 13 december 2005 @ 13:36:
Dat het niet kan (je kan geen standaard variabelen definiëren voor bijvoorbeeld een kleur) vind ik dus de grootste tekortkoming van heel CSS.

Als ik #A328FE als achtergrondkleur neem, en ik weet die niet uit mn hoofd zal ik dus elke keer die kleur moeten opzoeken, kopieren, en plakken naar het element waar ik dat op dat moment wil gebruiken en vooral in grote css files is dit nogal irritant en onoverzichtelijk af en toe.

Helaas, misschien in CSS4 denken ze hier nog eens over na ofzo...

Wat denk je van

Cascading Stylesheet:

.kleur1Font {
  color: red
}
.kleur1BG {
  background-color: red
}.
.kleur2Font {
  color: blue
}
.kleur2BG {
  background-color: blue
}

HTML:

<li class="menuitem kleur1Font">Item 1</li>
<li class="menuitem kleur2Font">Item 2</li>

Zo heb ik het onlangs nog op een klein siteje opgelost en dat werkt prima. Heb die kleuren in een los CSS-tje (kleuren.css) gedefineerd en kan dus heel makkelijk de 4 kleuren waaruit de gehele site is opgebouwd heel simpel aanpassen

@Janoz
IE kan dat inderdaad. Ikzelf los het meestal op met;

Cascading Stylesheet:

width: 50%; margin-right: 10px

[ Voor 19% gewijzigd door frickY op 13-12-2005 13:49 ]

[SchizoDuckie]

frickY schreef op dinsdag 13 december 2005 @ 13:46:
[...]

Wat denk je van:

Cascading Stylesheet:

...

HTML:

...

Zo heb ik het onlangs nog op een klein siteje opgelost en dat werkt prima. Heb die kleuren in een los CSS-tje (kleuren.css) gedefineerd en kan dus heel makkelijk de 4 kleuren waaruit de gehele site is opgebouwd heel simpel aanpassen

Dat is dus gewoon geen optie als je een bestaande site aan het aanpassen bent en eigenlijk de bedoeling hebt om alleen de CSS aan te passen. Nu haalt de hele gedachte achter CSS (zonder je html aan te hoeven passen de hele site van andere layout kunnen voorzien) zichzelf onderuit. Dan zou ik bijv. nog 500 pagina's aan moeten passen om overal ' kleur1font' bij te moeten zeten

Nogmaals, dit soort trucjes is leuk als je van de grond af een site opbouwt, maar het blijft echt iets waar ze niet goed over nagedacht hebben.


@Janoz: idd, dat heet expression() en dat werkt idd best leuk!

Cascading Stylesheet:

DIV
{
 _top: expression(parseInt(this.style.scrollHeight) > 100) ? "10px" : parseInt(this.style.scrollHeight) +"px" 
// _top, want je bent toch al IE-only bezig... je kan ook de speciale IE comment tags gebruiken ofcourse ;)
}

[ Voor 23% gewijzigd door SchizoDuckie op 13-12-2005 14:19 ]

[Verwijderd]

Jammer dat het bij elke Javascript call wordt geevalueerd en daardoor alleen echt handig is bij eenvoudige interfaces

[crisp]

Verwijderd schreef op dinsdag 13 december 2005 @ 14:24:
Jammer dat het bij elke Javascript call wordt geevalueerd en daardoor alleen echt handig is bij eenvoudige interfaces

behavior gebruiken en na evaluatie runtimeStyle.behavior op 'none' zetten

[frickY]

Verwijderd schreef op dinsdag 13 december 2005 @ 14:24:
Jammer dat het bij elke Javascript call wordt geevalueerd en daardoor alleen echt handig is bij eenvoudige interfaces

Jammerder ( ) dat WinXP SP2 het standaard blokkeerd (Onveilige ActiveX blabla)

[Verwijderd]

Janoz schreef op dinsdag 13 december 2005 @ 13:42:Al erg vaak heb ik dingen nodig gehad als (50% - 10px). Volgens mij heeft IE daar iets voor, maar met alleen een IE implementatie heb je daar weinig aan.

offtopic:
Probeer eens negatieve margins.

[ Voor 4% gewijzigd door Verwijderd op 13-12-2005 15:45 ]

[DeFeCt]

SchizoDuckie schreef op dinsdag 13 december 2005 @ 14:16:
[...]
Dat is dus gewoon geen optie als je een bestaande site aan het aanpassen bent en eigenlijk de bedoeling hebt om alleen de CSS aan te passen. Nu haalt de hele gedachte achter CSS (zonder je html aan te hoeven passen de hele site van andere layout kunnen voorzien) zichzelf onderuit. Dan zou ik bijv. nog 500 pagina's aan moeten passen om overal ' kleur1font' bij te moeten zeten

Misschien dat ik het verkeerd begrijp maar dit is toch gewoon een kwestie van een goede editor gebruiken? In TopStyle kun je op kleur precies zien welke classes er gebruik maken van deze kleur.

[SchizoDuckie]

DeFeCt schreef op dinsdag 13 december 2005 @ 15:50:
[...]


Misschien dat ik het verkeerd begrijp maar dit is toch gewoon een kwestie van een goede editor gebruiken? In TopStyle kun je op kleur precies zien welke classes er gebruik maken van deze kleur.

Ik hou niet van programma's als topstyle. Ik doe alles in mn EditPlus

Ook zonder een programma als topstyle moet zo'n standaard te gebruiken zijn

[Janoz]

@frickY & Stijn.
Ikzelf gebruik in die gevallen ook negatieve margins, maar in principe blijf ik dat een workaround/hack vinden eigenlijk. Daarnaast is het eigenlijk alleen maar bruikbaar bij het positioneren en niet (zoals in de code van fricky) bij afmetingen. Breedte blijft toch echt 50%.