|
| Forklaring på selectorer Fra : Rune Jensen |
Dato : 28-04-07 05:23 |
|
Ville det være muligt at få en mere uddybende forklaring på, hvordan disse
selectorer virker, og om IE6 forstår dem alle?
>
+
*
....Og virker pseudo-selector :firstletter ikke i IE6.0?
Kan man med én af ovenstående selectorer (eller andre, jeg ikke kender)
imitere first-letter? Jeg tænker på, at man kan bruge p og em, f.eks. Men em
skal så kun virke direkte under <p>, når det er det første tag. Altså...
<p><em>t</em>ekst. Mere <em>tekst</em></p>
....skal kun have virkning på første <em>, andre skal kunne styles frit.
Idéen er ikke at bruge class, da jeg synes, det skæmmer koden. Og det skal
som sagt også virke i IE6
MVH
Rune Jensen
--
Grafiker/grafisk talent til web søges til samarbejde.
runeofdenmark snabela gmail punktum com
| |
Jørgen Farum Jensen (28-04-2007)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 28-04-07 11:11 |
|
Rune Jensen skrev:
> Ville det være muligt at få en mere uddybende forklaring på, hvordan disse
> selectorer virker, og om IE6 forstår dem alle?
>
> +
> *
>
> ...Og virker pseudo-selector :firstletter ikke i IE6.0?
>
> Kan man med én af ovenstående selectorer (eller andre, jeg ikke kender)
> imitere first-letter? Jeg tænker på, at man kan bruge p og em, f.eks. Men em
> skal så kun virke direkte under <p>, når det er det første tag. Altså...
>
> <p><em>t</em>ekst. Mere <em>tekst</em></p>
>
> ...skal kun have virkning på første <em>, andre skal kunne styles frit.
> Idéen er ikke at bruge class, da jeg synes, det skæmmer koden. Og det skal
> som sagt også virke i IE6
Jeg tror, det er :first-child, du efterlyser:
em:first-child {
font-style:normal;font-weight:bold;
color:red;}
vil skrive det første t med fed rød skrift.
Ang. en mere uddybende forklaring - kapitel
5 i nedennævnte CCS-bog er den mest uddybende
og samlede forklaring jeg kender på dansk.
Min egen faste støtte i den slags anliggender
er Eric Meyer: Cascading Style Sheets.
For så vidt angår browsertolkning af selektorer
og egenskaber er
http://meyerweb.com/eric/css/tests/css2/index.html
helt uundværlig.
Og glem din fordom om, at class skæmmer
koden, det en fuldstændig integreret del
af HTML4 og XHTML, ganske som id, title og
lang. Husk på at ovenstående vil kolorere
/alle/ em'er, der er første afkom af et andet
element...
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Jørgen Farum Jensen (28-04-2007)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 28-04-07 12:05 |
|
Rune Jensen skrev:
> Ville det være muligt at få en mere uddybende forklaring på, hvordan disse
> selectorer virker, og om IE6 forstår dem alle?
>
> +
> *
Undskyld, jeg kunne godt i mit første svar
havde skrevet lidt mere om de to konkrete
selektorer:
+ er nærmest søskende selektoren (adjacent
sibling):
h1+p {font-weight:bold}
vil vise alle tekstafsnit, der følger lige efter
en h1-overskrift, være med fed skrift.
* er universal-selektoren, der vælger
alle elementer:
ul * {font-size:.9em;}
vil sikre at alle li'er og ikke mindst
indlejrede lister vil få samme skriftsstørrelse.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Rune Jensen (28-04-2007)
| Kommentar Fra : Rune Jensen |
Dato : 28-04-07 12:51 |
|
"Jørgen Farum Jensen" skrev i en meddelelse...
> + er nærmest søskende selektoren (adjacent
> sibling):
> h1+p {font-weight:bold}
> vil vise alle tekstafsnit, der følger lige efter
> en h1-overskrift, være med fed skrift.
>
> * er universal-selektoren, der vælger
> alle elementer:
> ul * {font-size:.9em;}
> vil sikre at alle li'er og ikke mindst
> indlejrede lister vil få samme skriftsstørrelse.
Jeg takker Farum, ja jeg må vel snart til at investere i din bog, så. Hmmm..
men hvad er forskellen på adjacent siebling og så first-child? Ville
ovenstående ikke også kunne skrives:
h1 p:first-child{font-weight: bold}
Nå, jeg tager et kig på first-child...
PS. Nu ikke kun for at få en renere HTML, men også fordi mobilos ikke
opfatter alt css. Men den bør vel acceptere en em. Eller strong, som nok var
det, jeg tænkte på.
MVH
Rune Jensen
--
WinAMP: Koko - Open your eyes
| |
Rune Jensen (28-04-2007)
| Kommentar Fra : Rune Jensen |
Dato : 28-04-07 13:19 |
|
"Rune Jensen" skrev i en meddelelse...
> Nå, jeg tager et kig på first-child...
....næh. Den forstår IE6 så heller ikke. Lader til den browser kun forstår
det mest basale. Men så må man jo holde sig lidt endnu til håndholdt kamera
og ...dogmekodning
MVH
Rune Jensen
--
WinAMP: Skimix 3
| |
Anders M (29-04-2007)
| Kommentar Fra : Anders M |
Dato : 29-04-07 10:04 |
|
"Rune Jensen" <runeofdenmark@hotmail.com> wrote in message
news:46333b22$0$4159$456a7185@news.cirque.dk...
> "Rune Jensen" skrev i en meddelelse...
>
>> Nå, jeg tager et kig på first-child...
>
> ...næh. Den forstår IE6 så heller ikke. Lader til den browser kun forstår
> det mest basale. Men så må man jo holde sig lidt endnu til håndholdt
> kamera og ...dogmekodning
Jeg er netop opslugt af bogen Web Standards Creativity, og deri er jeg netop
blevet gjort opmærksom på et stykke rart Javascript, som angiveligt skal
kunne få IE5+/Win til at forstå de nævnte selectors:
a.. namespace|selector
b.. parent > child
c.. adjacent + sibling
d.. adjacent ~ sibling
e.. [attr], [attr="value"], [attr~="value"] etc
f.. .multiple.classes (fixes bug)
g.. :hover, :active, :focus (for all elements)
h.. :first-child, :last-child, only-child, nth-child, nth-last-child
i.. :check, :disabled, :enabled
j.. :root, :empty, :contains(), :not()
k.. :before/:after/content:
l.. :lang()
Jeg har ikke selv haft mod/tid til at teste det endnu. Og jeg er heller ikke
heeeelt glad for at lade Javascript stå for sådan noget.
Man kan se mere på http://dean.edwards.name/IE7/
Mvh.
Anders M
| |
Jørgen Farum Jensen (29-04-2007)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 29-04-07 10:15 |
|
Anders M skrev:
> "Rune Jensen" <runeofdenmark@hotmail.com> wrote in message
> news:46333b22$0$4159$456a7185@news.cirque.dk...
>> "Rune Jensen" skrev i en meddelelse...
>>
>>> Nå, jeg tager et kig på first-child...
>> ...næh. Den forstår IE6 så heller ikke. Lader til den browser kun forstår
>> det mest basale. Men så må man jo holde sig lidt endnu til håndholdt
>> kamera og ...dogmekodning
>
> Jeg er netop opslugt af bogen Web Standards Creativity, og deri er jeg netop
> blevet gjort opmærksom på et stykke rart Javascript, som angiveligt skal
> kunne få IE5+/Win til at forstå de nævnte selectors:
> a.. namespace|selector
> b.. parent > child
> c.. adjacent + sibling
> d.. adjacent ~ sibling
> e.. [attr], [attr="value"], [attr~="value"] etc
> f.. .multiple.classes (fixes bug)
> g.. :hover, :active, :focus (for all elements)
> h.. :first-child, :last-child, only-child, nth-child, nth-last-child
> i.. :check, :disabled, :enabled
> j.. :root, :empty, :contains(), :not()
> k.. :before/:after/content:
> l.. :lang()
> Jeg har ikke selv haft mod/tid til at teste det endnu. Og jeg er heller ikke
> heeeelt glad for at lade Javascript stå for sådan noget.
Nu kan du jo indrette det sådan, at du kun eksponerer
dette JavaScript overfor IE5/IE6.
> Man kan se mere på http://dean.edwards.name/IE7/
Eller
http://www.webdesign101.dk/ie7/eksempler/
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Anders M (29-04-2007)
| Kommentar Fra : Anders M |
Dato : 29-04-07 10:20 |
|
"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> wrote in message
news:46346201$0$6266$edfadb0f@dread14.news.tele.dk...
>> Jeg har ikke selv haft mod/tid til at teste det endnu. Og jeg er heller
>> ikke heeeelt glad for at lade Javascript stå for sådan noget.
>
> Nu kan du jo indrette det sådan, at du kun eksponerer
> dette JavaScript overfor IE5/IE6.
Nemlig. Men det er stadig lidt synd for dem, der ikke har slået JS til af
forskellige årsager.
Jeg kan ikke lige gennemskue graden af "graceful degradation". Men det er
også søndag formiddag...
>> Man kan se mere på http://dean.edwards.name/IE7/
>
> Eller
>
> http://www.webdesign101.dk/ie7/eksempler/
Hehe. Du er så hurtig
-
Anders M
| |
Rune Jensen (01-05-2007)
| Kommentar Fra : Rune Jensen |
Dato : 01-05-07 17:24 |
| | |
|
|