[css] meer css met htc voor IE

[Verwijderd]

Ze werken niet probleemloos, er zijn nog wat dingetjes, maar daar is die nu aan het werken, waarschijnlijk.
Daarom is die dan ook blij met testers

Hier kun je ze zien, als je daar zin in hebt:
http://home.hccnet.nl/m.wargers/moz-behaviors2/

Ik begin eigenlijk de neiging te krijgen om het andersom te gaan doen: een htc wrapper voor xbl bindings
Mwaah, waarschijnlijk kan dat niet, IE is toch wat beperkter in sommige opzichten (denk dat het mij toch niet zou lukken)

[LauPro]

Ik heb even zitten kijken en ik vroeg met af of je hiermee ook CSS2-constructies mee kan maken:

Cascading Stylesheet:

.tbl tr td {background-color:yellow}
.tbl tr td + td {background-color:blue}
.tbl tr td + td + td {background-color:green}
.tbl tr td + td + td + td {background-color:red}

Dit zou namelijk vrij veel bandbreedte schelen op grote tabellen.

[ Voor 4% gewijzigd door LauPro op 20-01-2004 14:12 . Reden: CSS2 idd ipv CSS3 ]

[Verwijderd]

Dat is CSS2... En daarvoor kun je beter "col#eerste{ background:green; }" voor gebruiken. CSS3 kun je hier vinden: http://www.w3.org/TR/css3-selectors/

[LauPro]

col#eerste? Hoe wil je dat gaan toepassen? Wat ik dus wil is dat ik de td's geen class meer mee hoef te geven.

edit: WoudLoper, bedankt dat is wat ik zocht idd, maar toch vind ik persoonlijk de CCS2 oplossing beter omdat dat imo minder dubbelop is.

[ Voor 39% gewijzigd door LauPro op 20-01-2004 18:27 ]

[Woudloper]

LauPro, ik denk dat je even moet kijken naar het volgende onderdeel van de HTML specs. Dit gaat namelijk over COLGROUP en over de COL elementen binnen een TABLE.

Zie voor een implementatie van de COLGROUP en COL dit voorbeeld op dezelfde pagina.

[LauPro]

Het biedt toch geen uitkomst voor zover ik zie, bij een col-element mag/kan je geen align meegeven namelijk (IE pakt het wel, maar mozilla niet). Dus het zou toch echt met TD + TD moeten volgens mij .

[Verwijderd]

Klopt, daar zoekt het W3C nog een oplossing voor (zie ook Hixie's log). Maar dan nog denk ik dat nth-child() e.d. beter zijn dan een simpele '+' selector.

Merk ook op dat je het in eerste instantie had over een achtergrondkleur, moeilijk voor mij om te ruiken dat je ook wilt gaan 'alignen'.

[creative8500]

Verwijderd schreef op 21 januari 2004 @ 15:02:
Klopt, daar zoekt het W3C nog een oplossing voor (zie ook Hixie's log). Maar dan nog denk ik dat nth-child() e.d. beter zijn dan een simpele '+' selector.

Merk ook op dat je het in eerste instantie had over een achtergrondkleur, moeilijk voor mij om te ruiken dat je ook wilt gaan 'alignen'.

Upcoming issue alert: de combinatie van <td colspan=">1"/> en nt-of-type en consorten. In dergelijke gevallen kun je het logischerwijs beter regelen via <col/>.

_{lees niet: computedstylelogischerwijs}

[LauPro]

Verwijderd schreef op 21 januari 2004 @ 15:02:
Klopt, daar zoekt het W3C nog een oplossing voor (zie ook Hixie's log). Maar dan nog denk ik dat nth-child() e.d. beter zijn dan een simpele '+' selector.

Die zou daarvoor ook gebruikt kunnen worden idd, echter werkt die functie nog niet in Mozilla én IE. En aangezien het hier niet om details gaat kan je het eigenlijk niet maken om het dan weer te geven op deze mannier. Daarnaast zou dan deze htc-tweak dus enkel een uitbreiding op IE zijn ipv een uitbreiding t.o.v. Mozilla (ik neem even Mozilla als voorbeeld).

Merk ook op dat je het in eerste instantie had over een achtergrondkleur, moeilijk voor mij om te ruiken dat je ook wilt gaan 'alignen'.

Dat is idd waar, maar noem mij een element die je niet kan alignen maar wel een achtergrondkleur kan geven of geen achtergrondkleur mag geven en kan alignen .

[Verwijderd]

Het COL element dus. Zie ook bug 915 voor veel informatie en argumentatie (naast de 'spam' comments). Dat IE het wel ondersteund zegt in feite alleen maar dat de browser meer buggy is, hoewel het wel fijner is voor developers uiteraard.

[Clay]

update

op Naar Voren staat nu een artikel over o.a. de :hover & htc, met een uitleg van een uitklapmenu dat met meerdere lagen en zonder > child selector werkt door gebruik te maken van de specificity van CSS.

Zelf ben ik iig erg blij met het resultaat (en ook een beetje trots natuurlijk )

[Verwijderd]

ziet er goed uit.

http://www.xs4all.nl/~peterned/csshover.html

Note: there is another way to do this with CSS, without the use of classes for lists and/or items as described above. More about this soon.

Dat bedoelde je dus (toch?). Je maakt nu gebruik van het specificiteitsbeginsel van css.

Jammer voor de engelse lezers

Heb je ook nog iets veranderd aan het script zelf? Of is die nog hetzelfde.
Ik heb het gevoel dat die van naarvoren iets sneller is, maar dat zou denk ik ook kunnen komen omdat je op je eigen site ook achtergrondplaatjes gebruikt.

[Clay]

[...]

Dat bedoelde je dus (toch?).

Ja

Jammer voor de engelse lezers

Idd
Dat stuk moet ik dus ff ombouwen naar engels, maar dat wou ik niet doen voordat het op naarvoren stond. En het scheelt maar 1 dag ook.

Heb je ook nog iets veranderd aan het script zelf? Of is die nog hetzelfde.
Ik heb het gevoel dat die van naarvoren iets sneller is, maar dat zou denk ik ook kunnen komen omdat je op je eigen site ook achtergrondplaatjes gebruikt.

De images schelen alles. IE heeft daar een heel irritant cache/reload probleem mee. Sinds de eerste versie is er verder eigenlijk geen regel onveranderd gebleven Er zaten stieken toch nog een aardig aantal zieke bugs in. De versie op Naarvoren is dus nu ook de nieuwste. (1.11) Er zou nog wel verder geoptimaliseerd kunnen worden, door bv. geen getElemenstByTagName te gebruiken maar zelf door de dom te rennen, en bv. geen split te gebruiken om de rule te parsen, en nog wat dingen, maar het wordt dan allemaal weer langer en erg lastig om ie5.0 nog werkend te houden.

De eerste reactie die ik van naarvoren doorgestuurd kreeg was overigens van een vormgever, die het te technisch vond

[crisp]

hoeveel sneller wil je 'm hebben? een 20-30% valt er nog wel uit te persen zo op het eerste gezicht

[ Voor 48% gewijzigd door crisp op 03-02-2004 18:52 ]

[Verwijderd]

Clay schreef op 03 februari 2004 @ 15:52:
update

op Naar Voren staat nu een artikel over o.a. de :hover & htc, met een uitleg van een uitklapmenu dat met meerdere lagen en zonder > child selector werkt door gebruik te maken van de specificity van CSS.

Zelf ben ik iig erg blij met het resultaat (en ook een beetje trots natuurlijk )

ziet er erg goed uit, en is ook zeer goed te lezen. Vormgever vond het te technisch, dan moet hij maar even snel kijken wat echt technisch is en een van die javascript menu's erbij pakken en die source even bekijken. Het is hiermee al zoveel sneller en simpeler geworden. Alleen nu nog niet ongelimiteerd aantal lagen.

[Woudloper]

De update van je whatever:hover ziet er goed uit en het artikel bij Naar Voren is zeer netjes geschreven en met een net voorbeeld van een :hover menu erbij. Ik mis overigens nog wel meer voorbeelden. In jouw eigen beschreven uitleg zitten wel meer voorbeelden op meerdere (whatever) tags.

Ik zag trouwens bij CSS Vault » The Web's CSS Site een link (geloof dat ik hem ook al eerder had gemeld) naar andere oplossing (met betrekking tot :hover). De persoon daar doet zelf heuze vergelijking wat zijn script wel kan en die van jou niet Ik geloof wel dat hij naar de oudere versie heeft gekeken...

[CrashOne]

De htc van die andere moet je aan een element in je css hangen, wat natuurlijk niet zo makkelijk werkt als 1 maal een linkje in je css toevoegen.

[Verwijderd]

De eerste reactie die ik van naarvoren doorgestuurd kreeg was overigens van een vormgever, die het te technisch vond

Het is toch nooit goed. Als het minder technisch was geweest, dan had ik wel geklaagd

getElemenstByTagName is trager dan zelf door de dom rennen? Dat snap ik niet. Zelf een functie bakken die hetzelfde doet als getElemenstByTagName is dan sneller?
Eigenlijk idem voor split.

Ik denk overigens dat in dit geval snelheid niet zo'n probleem is.

Die andere site heeft eigenlijk gewoon een standaard htc-script.
Het script van Clay is bijzonder, omdat het veel generieker is.
Het klopt wel dat het pas gaat werken als de pagina geladen is.
Zijn htc-script is wat dat betreft een gewoon script in een htc-jasje. Dat doet hij om het generiek voor elk element te laten werken (daarvoor moet die 'on the fly' ook nog een css parser schrijven)
Een voordeel van htc is daarmee teniet gedaan: htc-scripts kunnen runtime uitgevoerd worden op het moment dat het element is geladen.

[SchizoDuckie]

De enige feature die ik nog mis is eigenlijk het opnieuw 'parsen' van de css na het (on-the-fly) aanmaken van een nieuw element...

Maar da's niet een van de simpelste dingen om te coden in javascript, tenzij je een generieke createElement hook kan uitvogelen...

[Verwijderd]

ik mis ook nog de :active pseudoclass, msie 6 geeft 'm wel terug (dus geen :unknown), als ik kijk naar het gedrag in moz, dient het te functionereen als een mousedown. W3C:

The :active pseudo-class applies while an element is being activated by the
user. For example, between the times the user presses the mouse button
and releases it.

eens kijken of ik die erin kan krijgen (lijkt me niet moeilijk, gewoon clay's code uitbnreiden)

[ Voor 13% gewijzigd door Verwijderd op 05-02-2004 11:03 ]

[Clay]

yup, de :active kan er idd ook nog in, heb ik ook al wat testjes mee gedaan, en ik krijg ook veel mail van mensen die het zelf hebben gedaan (meestal door hele stukken code te copy'en trouwens ... generieke code)

Wat trouwens ook -kan- is toch de :unkown aan een focus verbinden. De events die je dan koppelt (onfocus en onblur) werken toch alleen maar op elementen die die events ondersteunen (zoals inputs), en hoewel b.v. een :first-child dan in IE op een p toch die focus events zou koppelen zou er niets gebeuren omdat dat niet werkt op p's.

D'r zou ook evt. een check in kunnen (moeten, eigenlijk) die de focus dan ook alleen op form elementen toepast. Iig zou er altijd de opmerking bij moeten dat je dan geen andere pseudo's dan focus, active en hover moet gebruiken op form elementen, maar dan heb je wel ook :focus

't gaat dan alleen wel meer de richting van ranzigheden uit imo.

[BtM909]

offtopic:
Sorry voor dit offtopic geblaat, maar ik heb nu ff geen email mogelijkheid

mophor, bedoel je met je sig:
_{zoekt een W&G topic van een hele tijd terug waarin gediscussieerd werd over naamgeving van css classes, dat ze de funtie moeten beschrijven, niet de vorm, weet iemand welke dat was? plz mail}

Niet dit topic: Fout gebruik van html & css

?

[Verwijderd]

ik zit idd te prutsen in je code, maar het wordt er idd niet generieker op.

die :focus klinkt eng, vergeet niet dat een a ook focus kan krijgen en ook children kan hebben, om maar een voorbeeld te noemen. Dat laatste zou ik dus niet doen

ik wacht wel op de generieke htc whatever:whatever 2.0

@BtM909: dat is 'm fantastisch

[ Voor 6% gewijzigd door Verwijderd op 05-02-2004 11:32 ]

[Clay]

mophor
die :focus klinkt eng, vergeet niet dat een a ook focus kan krijgen en ook children kan hebben, om maar een voorbeeld te noemen. Dat laatste zou ik dus niet doen

Het duffe is dat het -kan- maar betekent dat idd dat je het ook maar -moet- ? De focus enablen op input, select, textarea en a is b.v. heel leuk, maar dat betekent dan dus wel dat alle andere pseudo's (naast hover en active) niet meer gebruikt kunnen worden op die elementen.
Voor form elementen is dat niet zo'n megaramp denk ik ('t is ook een keuze), maar voor links betekent dat dat een :before of :after (die daar heeeeel denkbaar op zijn) dan toegepast gaan worden op de link zelf onfocus en dat wil je niet. (al moeten pseudo elementen eigenlijk weer met :: en niet : maarja wie doet dat nou). Focus op links enablen is dus misschien niet zo'n super idee, maar het zou wel handig zijn ook

ik wacht wel op de generieke htc whatever:whatever 2.0

Active kan er idd standaard in. focus wordt dan een keuze in een losse file, met de pro's en con's duidelijk erbij.

[Verwijderd]

Als mijn herinnering me niet in de steek laat, dan geloof ik dat a:active in ie werkt als een a:focus. (voor als het nog niet bekend was)
Dit zou toch relatief eenvoudig te fixen zijn door alle rules met a:focus te veranderen in a:active (en andersom)?

[Verwijderd]

Papa Eend schreef op 04 februari 2004 @ 00:13:
De enige feature die ik nog mis is eigenlijk het opnieuw 'parsen' van de css na het (on-the-fly) aanmaken van een nieuw element...

Maar da's niet een van de simpelste dingen om te coden in javascript, tenzij je een generieke createElement hook kan uitvogelen...

Ik heb wel eens het script van Clay aangepast zo dat de :hover rule werd veranderd in een .onhover rule en er werd een extra rule aangemaakt op basis van de :hover rule (maar zonder de :hover), daarin zette ik dan behavior:url(csshover.htc);
Deze file regelde de classname-verandering van .onhover naar '' en terug.

Alleen IE parsed geen behaviors als die later zijn ingevoegd in een stylesheet, dus toen moest ik iets heel ranzigs doen:
doc.body.innerHTML=doc.body.innerHTML;
Toen werkte het wel, maar dit werd mij te ranzig.

Maar in principe werkt deze manier ook wel voor dynamisch gecreeerde element.

[Verwijderd]

Clay schreef op 05 februari 2004 @ 12:40:
[...]
(al moeten pseudo elementen eigenlijk weer met :: en niet : maarja wie doet dat nou[...]

huh? da's nieuw voor mij? hoe wat waar en waarom? ik heb het nog niet kunnen vinden iig

[Verwijderd]

CSS3, ik gebruik het wel btw :-).

Mozilla ondersteund het, Opera geloof ik ook en waarschijnlijk zal Safari dat inmiddels ook wel doen.

Is opzich wel een handige manier om pseudo-elementen en pseudo-classes uit elkaar te houden.

[Clay]

Idd. IE "ondersteunt" het (waarschijnlijk per ongeluk) ook. maar ook met drie of meer : werkt het nog steeds dus da's echt wel een bug.

[Verwijderd]

Hier een voorbeeld om ook :active en :focus werkend te krijgen.
Let niet op de puinhoop
http://home.hccnet.nl/m.wargers/csshover3/cssmenu.html
http://home.hccnet.nl/m.wargers/csshover3

Ik wist eerst niet hoe ik in ie op een fatsoenlijke wijzen een stylesheet moest toevoegen (zodat ik extra htc's kon toevoegen).
Dankzij de ie-namespaces.htc van Dean Edwards ben ik er achter gekomen:
http://dean.edwards.name/my/behaviors/
Die ie namespace fix van hem fixt trouwens ook meteen de attribuut selectors voor class en id trouwens.

[UltimateB]

Ik gebruik atm die HTC file voor men site en heb een bug gevonden (misschien).

Ik gebruik hem behalve als menu ook in deze vorm:

code:

h4 a {
    text-decoration:none;
    border:none;
    color:gray;
    width:75px; /* IE */
}

h4 a:hover {
    background-color:#bbb7c7;
    color:black;
    width:75px; /* IE */
    height:16px;
    
}

Op het moment dat je float boven een knop hang en dan refresh dan POEF verdwijnen zo. Een refresh (of hard refresh met ctrl+f5) hebben beiden geen effect. Pas als ik de pagina dan opnieuw via de adressbalk aanvraag verschijnen ze weer.

In de source van de pagina staan ze wel, ook als je ze niet ziet.

Beetje bizar?

[Clay]

Tjah, moet een bug zijn in IE dan de htc doet niets met a's namelijk, die werken immers al.

_{verder lijkt me dit eigenlijk niet de aangewezen plek voor helpdesken hierover.
mijn mailbox is gevuld edoch altijd geduldig.}

[UltimateB]

Clay schreef op 02 maart 2004 @ 20:21:
Tjah, moet een bug zijn in IE dan de htc doet niets met a's namelijk, die werken immers al.

_{verder lijkt me dit eigenlijk niet de aangewezen plek voor helpdesken hierover.
mijn mailbox is gevuld edoch altijd geduldig.}

Ow, ik was in de veronderstelling dat die htc hover fixede @ IE. Blijkbaar had ik het mis (hover niet hetgeen gekoppeld aan float dan?) Naja, mijn fout dan blijkbaar.

[CrashOne]

Het fixed ook de hover op andere elementen dan a, a is het enige element waarop IE standaard :hover ondersteund.

[coubertin119]

http://dean.edwards.name/IE7/

Nog meer spannend gebruik van .htc, let wel, 't is nog bèta.

Bedankt annevankesteren.nl

Hijs zo te zien al een pak eerder vernoemd, maar dit is echt wel hot news .

targets
namepsace|selector
:root
:hover/active/focus
[attr]
[attr="value"]
[attr~="value"]
multiple classes
parent>selector
sibling+selector
:first/last-child
min/max-width/height
<abbr/>(cadabra)
position:fixed
box-model
:before/after/content
:first-line/letter (fix bugs?)

[ Voor 63% gewijzigd door coubertin119 op 04-03-2004 12:53 ]

[BetuweKees]

die was ik gister ook toevallig al tegengekomen, meteen halve nacht mee lopen spelen, tis heel vet
krijg nog niet helemaal alles zoals ik wil (wilde natuurlijk meteen alles toepassen op site die ik aan ontwerpen ben) maar kan niet wachten tot ik vanavond weer thuis ben
toch nog hoop dat we op redelijke termijn eens gebruik kunnen gaan maken van 'echte' stylesheets

[SchizoDuckie]

Is er íemand hier die me dit stukje code kan uitleggen? Ik snap er echt geen jota van Dit ziet er nl uit als C en niet als JavaScript?

code:

HTML\:ABBR {
    /* implement the dotted underline effect */
    background: url("javascript:'#define x_width 2\\n#define x_height 1\\nstatic char x_bits[]={0x01}'") repeat-x bottom left;
}

[ Voor 12% gewijzigd door SchizoDuckie op 04-03-2004 14:13 ]

[Rickets]

Een blik in het commentaar:

<!-- both mozilla and explorer can accept images from the
javascript: protocol. mozilla accepts base 64 encoded gifs.
explorer prefers x-bitmaps (xbm). we'll build a simple xbm
consisting of two pixels, one "on" (black) and the other
"off" (transparent). this image can then be repeated
along the bottom of a screen element to mimic the dotted
underline effect of mozilla -->

[Verwijderd]

xbm images, die zijn inderdaad te genereren in javascript met een soort c-taaltje.
Dat wordt nogal eens in de 5k-contests gebruikt.
Het is wel alleen zwart-wit.

Hier zie je een klok met een javascript xbm-gegenereerd plaatje:
http://david.blackledge.com/AnalogClock.html

Je ziet het, er zijn allerlei nuttige toepassingen voor te bedenken

[Verwijderd]

Vraagje,

Ik ben pas bezig met CSS, erg tof DIVS etc. Maar kan ik ook een DIV maken, die een 'x' aantal pixels onder een boveliggende box 'hangt' / staat. Aangezien de content van de bovenliggende box variabel is, en dus ook de hoogte van de box.

[coubertin119]

padding/margin.

offtopic:
Waarom een kick in dit topic?

[Verwijderd]

ik zocht naar CSS en kwam hier uit, is er misschien een algemeen CSS topic?

bedankt iig, ik ga even kijken naar de padding

[UltimateB]

Probeer anders even deze url:

http://www.w3schools.com/css/default.asp

Kan je de basics van css leren, best ahndig

[Verwijderd]

Misschien is hier nog een htc goeroe die mij kan helpen. Ik wil graag in een htc bestand een globale variabele (taal) zetten.

Aan de hand van twee verschillende images wil ik een functie aanroepen die de variabele zet.

Ik kan wel een setLanguageNl aan een image hangen en een setLanguageEn aan een andere, maar dan zet ik dus twee verschillende variabelen. Kan ik ook op de een of andere manier een HTC aanroepen met een argument?

Bednakt,
Johannes

[BtM909]

Verwijderd schreef op 02 november 2004 @ 14:27:
Misschien is hier nog een htc goeroe die mij kan helpen. Ik wil graag in een htc bestand een globale variabele (taal) zetten.

Aan de hand van twee verschillende images wil ik een functie aanroepen die de variabele zet.

Ik kan wel een setLanguageNl aan een image hangen en een setLanguageEn aan een andere, maar dan zet ik dus twee verschillende variabelen. Kan ik ook op de een of andere manier een HTC aanroepen met een argument?

Bednakt,
Johannes

1. Waarom zo'n oud topic kicken met een probleem wat niks dit topic te maken heeft?
2. Wat wil je precies met die variabele gaan doen?
3. Waarom een HTC om een variabele te zetten

[Bosmonster]

Heeft weinig met het originele topic te maken.. begin maar een nieuwe (al is je redenatie zoals BtM al zegt enigszins vreemd )