---

Hej,

Jeg roder en del med CSS ... og er rimeligt træt af en ting... manglen
på brugen af extends... er det virkelig ikke muligt? På en eller anden
måde (uden at skulle bruge en masse serverside...).

Lad os tage et eksempel:

<style type="text/css">
.font1 {
font-size : 9pt;
color : #000000;
font-family : arial,helvetica,sans-serif;
}
.font2 {
font-size : 10pt;
color : #ff0000;
font-family : arial,helvetica,sans-serif;
}
#box1 extends .font1 {
background-color : #ff00ff;
}
#box2 extends .font2 {
background-color : #0000ff;
}
TD extends .font1 {
background-color : #cccccc;
}
</style>


Er det virkelig ikke muligt at bygge et stylesheet op således? Det ville
da være den optimale metode set ud fra mit synspunkt? Eller er der et
eller andet jeg misser et sted? :)

Forslaget kunne muligvis videregives til W3.org (eller noget der ved om
de arbejder med det allerede?).

mvh
Johan

---

Johan Holst Nielsen wrote:
> Jeg roder en del med CSS ... og er rimeligt træt af en ting... manglen
> på brugen af extends... er det virkelig ikke muligt? På en eller anden
> måde (uden at skulle bruge en masse serverside...).

Jeg forstår desværre ikke helt hvad du mener med extends. Kan du uddybe
det lidt mere ?

Hintzmann c",)

---

Martin Hintzmann Andersen wrote:
> Johan Holst Nielsen wrote:
>
>> Jeg roder en del med CSS ... og er rimeligt træt af en ting... manglen
>> på brugen af extends... er det virkelig ikke muligt? På en eller anden
>> måde (uden at skulle bruge en masse serverside...).
>
>
> Jeg forstår desværre ikke helt hvad du mener med extends. Kan du uddybe
> det lidt mere ?
>

Extends = du udvider...

Altså... nu ved jeg ikke hvor meget du er inde i f.eks. serverside sprog
i OOP? Der bruger du f.eks. extend til at ude klasser... således den
overtager de ting som er inden i...

Således behøves du kun definere et sted... i stedet for f.eks. både at
definere (den samme font og størrelse) både i TD, BODY, DIV og f.eks. en
..subject...

Så hvis du en dag ønsker at skifte font kan det gøres nemt et sted og
ikke flere steder... altså...

..font1 {
font-family : sans-serif;
font-size : 9pt;
}
TD extends .font1 {
background-color : #000000;
color : #ffffff;
}
DIV extends .font1 {
background-color : #ffffff;
color : #000000;
}

Nu vil TD så opføre sig som om den så således ud:

TD {
background-color : #000000;
color : #ffffff;
font-family : sans-serif;
font-size : 9pt;
}

og DIV som om den så således ud:

DIV {
background-color : #ffffff;
color : #000000;
font-family : sans-serif;
font-size : 9pt;
}

var det mere forståeligt?

mvh
Johan

---

Johan Holst Nielsen wrote:
>
> Altså... nu ved jeg ikke hvor meget du er inde i f.eks. serverside sprog
> i OOP? Der bruger du f.eks. extend til at ude klasser... således den
> overtager de ting som er inden i...

[snip]

>
> Således behøves du kun definere et sted... i stedet for f.eks. både at
> definere (den samme font og størrelse) både i TD, BODY, DIV og f.eks. en
> .subject...
>
> var det mere forståeligt?

Ja, det var mere forståeligt.

Men kan ikke bruge extends som i OOP, men det kan omgåes.

Du kan benytte * for at sætte en style på alt på en side. ex.

* {
   font-family : sans-serif;
   font-size : 9pt;
}

Du kan også sætter din style på body elementet, men så slår det vist
ikke igennem på alle elementer, f.eks. TD.

body {
   font-family : sans-serif;
   font-size : 9pt;
}

Hintzmann c",)

---

Johan Holst Nielsen <johan@weknowthewayout.com> writes:

> Altså... nu ved jeg ikke hvor meget du er inde i f.eks. serverside
> sprog i OOP?

Det første du skal vide er at selv om CSS bruger ordene "klasse" og
"nedarve", så er det *ikke* objektorienteret. Derfor skal man ikke
forvente at andre objektorienterede begreber giver mening.

> .font1 {
> font-family : sans-serif;
> font-size : 9pt;
> }
> TD extends .font1 {
> background-color : #000000;
> color : #ffffff;
> }
> DIV extends .font1 {
> background-color : #ffffff;
> color : #000000;
> }

....

> var det mere forståeligt?

Det var det. Eksemplet specielt (jeg er stadig ikke sikker på hvad
det betyder at "ude klasser", er det bare en typo for "udvide"?)

Må man skrive noget i stil med:

div extends div span #foo .bar { }

(altså en generel selector)?
Hvad hvis der ikke er sådan en regel?

Det man *kan* gøre (og som CSS er bygget til at man gør) er at skrive
sine regler sådan:

.font1, TD, DIV {
font-family : sans-serif;
font-size : 9pt;
}
TD {
background-color : #000000;
color : #ffffff;
}
DIV {
background-color : #ffffff;
color : #000000;
}

Det vil give samme effekt som det du ønsker af "extends" i dit første
eksempel.


/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

---

Johan Holst Nielsen wrote:

> Martin Hintzmann Andersen wrote:
>
>> Johan Holst Nielsen wrote:

>> Jeg forstår desværre ikke helt hvad du mener med extends. Kan du
>> uddybe det lidt mere ?
>
> Extends = du udvider...

ok - jeg tror nok at du har fået svar fra Jens, men jeg giver lige en
anden version for det tilfældes skyld at den skulle virke uddybende.

Du er desværre nødt til at tænke anderledes med CSS idet det ganske vist
ikke har OOP inheritance, men i høj grad har nedarvning, og fuldstændigt
ubegrænsede muligheder for at overskrive værdier ud fra et
"nærhedsprincip": den angivelse af en attribut som er tættest på, gælder.

Du kan derfor lave:

..MinSuperKlasse{
background: blue;
/* padding, border osv osv */
}

..MinSuperKlasse div{
/* div'er som er _indeni_ det element som er sat til
class="MinSuperKlasse" får formattering herfra */
background: red;
}

..MinSuperKlasse .underKlasse{
/* igen indeni, men nu er det ikke hæftet op på en tag-selector men i
stedet på at være en class indeni det element som er sat
class="MinSuperKlasse" */
background: yellow;
}


---inde på html siden---

<div class="MinSuperKlasse">
tekst på blå baggrund
<div>
tekst på rød baggrund
</div>
<div class="underKlasse">
tekst på gul baggrund
</div>

<p>tekst på blå baggrund</p>

<p class="underKlasse">tekst på gul baggrund</p>
</div>


OK - måske lovligt meget skåret ud i pap - det var udelukkende ud fra et
grundighedsprincip, så føl dig endelig ikke talt ned til

mvh

Jesper Brunholm

--
Phønix - dansk folk-musik i front - <http://www.phonixfolk.dk/>
H.C. Andersen-Centret med nyt design: <http://www.andersen.sdu.dk/>

---

Johan Holst Nielsen wrote:

> Jeg roder en del med CSS ... og er rimeligt træt af en ting...
> manglen på brugen af extends... er det virkelig ikke muligt?

Du kan skrive <span class="klasse1, klase2, klasse3">Min tekst</span>.
Kan det ikke give noget i retning af det du efterlyser?
--
Toke Eskildsen - http://ekot.dk/

---

Toke Eskildsen wrote:
> Du kan skrive <span class="klasse1, klase2, klasse3">Min tekst</span>.
> Kan det ikke give noget i retning af det du efterlyser?

Jo, men så er styringen desværre inde i HTML dokumentet... og ikke i CSS
filen som jeg ønsker det :( Det er de to ting jeg gerne vil have adskilt...

Ovenstående kan blive uoverskueligt med STORE websites som jeg til
dagligt arbejder med ;)

Men du har ret... i sidste ende giver det samme resultat... mangler bare
overskueligheden...

mvh
Johan

---

Toke Eskildsen <darkwing@daimi.au.dk> writes:

> Du kan skrive <span class="klasse1, klase2, klasse3">Min tekst</span>.
> Kan det ikke give noget i retning af det du efterlyser?

Uden kommaer dg. Det er en mellemrums-separeret liste af klassenavne.
Der er browsere hvor det ikke virker, desværre.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

---

Lasse Reichstein Nielsen wrote:

[Snip Toke: <span class="klasse1, klase2, klasse3">]

> Uden kommaer dg. Det er en mellemrums-separeret liste af klassenavne.

Doh!

> Der er browsere hvor det ikke virker, desværre.

Ved du tilfældigvis hvilke?
--
Toke Eskildsen - http://ekot.dk/

---

Toke Eskildsen <darkwing@daimi.au.dk> writes:

> Lasse Reichstein Nielsen wrote:
>
> [Snip Toke: <span class="klasse1, klase2, klasse3">]
>
> > Uden kommaer dg. Det er en mellemrums-separeret liste af klassenavne.
>
> Doh!
>
> > Der er browsere hvor det ikke virker, desværre.
>
> Ved du tilfældigvis hvilke?

I *knew* you were going to say that!

Ikke præcist.

Et hurtigt test viser at Mozilla, Opera 4+ og IE6 forstår det uden
problemer. Netscape 4 fejler fuldstændigt og matcher ingen regel.

Et udpluk af testen er:
---
<style type="text/css">
.color {color:red;}
.bg {background:yellow;}
.color\ bg {color:blue;background:green;}
</style>
</head>
<body>
<div class="color">Color</div>
<div class="bg">Background</div>
<div class="color bg">Color Background</div>
---
Der var ingen der faldt for min .color\ bg-fælde. Enten virkede det,
eller også virkede det slet ikke (NS4).

Jeg mindes at have hørt at tidligere versioner af IE kun brugte det
første klassenavn i class-attributten, men kan jo ikke teste det.

Ok, lidt googleing senere: Det ser ud til at det skulle virke i IE5 og
Opera 3.5. Det var bug #701 i Mozilla, fikset 19. december 1998.

Det vil sige at hvis Konqueror forstår det, så gør alle moderne
browsere. IE 4 og NS 4 er ikke moderne browsere :).

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

---

Johan Holst Nielsen skrev:

> Jeg roder en del med CSS ... og er rimeligt træt af en ting...
> manglen på brugen af extends... er det virkelig ikke muligt?

Du kan tildele et element flere klasser samt et id - alle dele kan
styles. Semantiske arveregler kan også med fordel benyttes (h1.foo
arver fx alle egenskaber fra h1).

> .font1 {
> font-size : 9pt;
> color : #000000;
> font-family : arial,helvetica,sans-serif;
> }


> #box1 extends .font1 {
> background-color : #ff00ff;
> }


Hvis du nu blot skrev:

   .font1, #box1{
font-size : 9pt;
color : #000000;
font-family : arial,helvetica,sans-serif;
    }

   #box1{
background-color : #ff00ff;
   }

- så har du faktisk det du ønsker (så vidt jeg kan se).

En anden mulighed er at skrive html-koden for boks1 med en
klassedefinition:

<div id="box1" class="font1">

- så har du også opnået at alle definitioner gælder.


> Er det virkelig ikke muligt at bygge et stylesheet op således?
> Det ville da være den optimale metode set ud fra mit
> synspunkt? Eller er der et eller andet jeg misser et sted? :)

Har du styr på de måder man kan sætte selectorer sammen på? Jeg kan
ikke genkende dine problemer.


> Forslaget kunne muligvis videregives til W3.org (eller noget
> der ved om de arbejder med det allerede?).

Der arbejdes på CSS3-standarden. Jeg ved ikke om den indeholder
mulighed for klassevis arv. Men selv om det skulle ligge i CSS3-
forslaget, vil det ikke hjælpe meget i praktisk design.

CSS1 virker rimeligt i nyere browsere (med passende brug af browser
switching). Der er stadig en del browsere i brug der har problemer
med CSS1-standarden. CSS2 understøttes vidt forskelligt. Opera og
Mozilla har ganske god css-understøttelse - men så vidt jeg husker
er alle ting fra CSS2 bestemt ikke med endnu. IE, som benyttes af
langt den overvejende del af brugerne, er *lang* vej fra at
understøtte CSS2.

CSS2-standarden er fra 1998 - og som det ses stadig (5 år
efter) langt fra understøttet af alle browsere. Jeg tør slet ikke
tænke på hvor lang tid implementationen af en kommende CSS3-
standard så vil tage.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html