css3 ondersteuning

Status
Niet open voor verdere reacties.
N

nosmaS

Gebruiker
Lid geworden
22 mrt 2007
Berichten
77
hej

ik kan op de site van w3 e.a. wel mooie referenties naar de nieuwe css3 vinden
en ook chrome en firefox passen alletwee "does your browser support css3" test

maar wanneer ik zelf gebruik maak van de border image properties krijg ik niets te zien
en ook dreamweaver heeft in intellisense geen css3 ondersteuning

iemand ideetje
 
Van Dreamweaver weet ik niets af.
css 3 is anders opgebouwd dan eerdere versies. Het bestaat uit modules, waarbij de achterliggende gedachte is dat makers van browsers dan vrij zijn om (een deel van) een module in te bouwen, en niet de hele bulk in één keer.
Anders dan vorige versies is nu vooral gekeken naar wat browsers al hadden. Als bijvoorbeeld Microsoft iets handigs had (zoals word-wrap), werd dat in de specificatie opgenomen.
Bepaalde eigenschappen werken dus al in alle browsers, andere nog in geen enkele.

Daarnaast werken sommige eigenschappen in bepaalde browsers, maar hebben andere browsers vergelijkbare eigenschappen die alleen in die browser werken. Met enig knutselwerk is iets dan toch werkend te krijgen in elke browser. Bijvoorbeeld opacity: behalve IE ondersteunen alle browsers dat inmiddels op de css 3-manier, en IE heeft 'n eigen methode.

Voorlopig zul je dus helaas alles moeten opzoeken. Hier is 'n link naar 'n rijtje sites die info over ondersteuning van css in browsers geven:
http://www.css-voorbeelden.nl/links.html#a-css-br-sup
 
Laatst bewerkt:
probleem is dat mijn browser weldegelijk door de test geraakt
From the 43 selectors 43 have passed, 0 are buggy and 0 are unsupported (Passed 578 out of 578 tests)
Klik om te vergroten...
maar dat dit
<div style="border-image: url(../images/border.png) 27 round stretch; border:double orange 1em;">
Klik om te vergroten...
het helaas dan weer niet doet
 
Ja, wacht even. Dat is een test voor selectors, niet voor eigenschappen.
Veel browsers kunnen al wel met alle of heel veel selectors uit css 3 werken. (Even voor de zekerheid: een selector is dus bijvoorbeeld div#content p#geleuter. Of 'n css 3: div:last-child).
Probleem met die selectors is dat IE 6, 7 en 8 ze niet of nauwelijks ondersteunen. Dus het praktische gebruik is nihil, tenzij je het alleen voor leuke extra's gebruikt.

Wat betreft die eigenschappen zit er echt niets anders op dan op die sites te kijken of 'n eigenschap al wordt ondersteund of niet.

Ik zie op een van die sites dat webkit (Safari, Google Chrome) en Gecko (Firefox) dit experimenteel ondersteunen. Dat is zeg maar de voorfase van echte ondersteuning. Hoe 't precies werkt zul je even moeten opzoeken bij een van die links die ik gaf (voor Apple of Mozilla).
 
Laatst bewerkt:
Volgens die pagina werkt het in Firefox 3.1 en Safari. Als ik 't even uitprobeer, werkt border-image in Firefox 3.5, Safari en Google Chrome (logisch, Chrome en Safari gebruiken beide htmlkit als rendering engine).
In alle andere browsers werkt het dus niet.
Als jij die pagina bekijkt met 'n browser waarin het werkt, en in diezelfde browser werkt het niet als je 't zelf doet, dan is er vermoedelijk iets mis met de code.
Andere mogelijkheid: ik vind die pagina 'n beetje onduidelijk. Er zijn in totaal vier afbeeldingen. De bovenste twee zijn degene waar 't om gaat, die worden zeg maar ter plekke gemaakt.
De onderste twee zijn afbeeldingen zoals het zou moeten zijn, die zie je in elke browser. Mogelijk haal je dat door elkaar? Ik roep maar even wat, maar ik vind dat niet echt duidelijk aangegeven op die pagina, vandaar.
 
nee ik haal ze niet door elkaar, ik zie ze alletwee
dus het werkt
en als er iets fout is in mijn codering, kan je daar dan mee helpen?
<div style="border-image: url(../images/border.png) 27 round stretch; border: Double orange 1em;">
Klik om te vergroten...
 
Nee, dat kan ik niet.
Als ik na veel moeite eindelijk de code zichtbaar heb gekregen, zie ik tot mijn stomme verbazing dat het helemaal geen css 3 is wat ze gebruiken, maar -moz-border-image.
Ja, zo kan ik het ook.
Ze gebruiken dus gewoon het al veel langer bestaande mozilla (firefox)-attribuut. Ik heb verder niet gekeken, maar ik neem aan dat ze dan voor Safari -webkit-border-image gebruiken.

Ik heb toch even verder gezocht. Die pagina zet je dus lekker op het verkeerde been. In de tekst gebruiken ze de css 3-standaard. Maar het blijkt dat Firefox en Safari border-image dus gewoon nog niet ondersteunen volgens de css 3-standaard. Beide zijn nog in de experimentele fase, die voorafgaat aan 'echte' ondersteuning.
-moz-border-image
en -webkit-border-image
Dat hadden die $^)*$)^ er wel even bij mogen zetten.
Dus 't klopt dat je 't op die pagina ziet, maar niet als je vervolgens de door hun getoonde code gebruikt. Hoe verzin je 't.
Hier kun je vinden hoe 't moet in Firefox en Safari/Google Chrome:
https://developer.mozilla.org/en/CSS/-moz-border-image
http://developer.apple.com/mac/libr...rties.html#//apple_ref/doc/uid/TP30001266-SW1
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan