12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)
  • Q:
    Bijdrager
    lieven

    [css] safari opacity probleem

    Haai,

    Heeft iemand weet van problemen van Safari met CSS3 opacity? De webmaster van scoutswindeke.be heeft zich op de stylesheet van mijn website gestort (hij vond vaste pixelgroottes niet kunnen).

    In mijn html-code heb ik ondersteuning voor “disabled” toolbar items, maar toen ik die wou transparant maken met behulp van “opacity” gaf dat problemen, dus liet ik het zelf maar zo. Nu wist Pieter niet van deze problemen en heeft ie het wel weer geprobeerd. Het resultaat is wel erg vreemd op Safari:

    http://scoutswindeke.be/temp/default/

    De tekst in mijn berichten is plots mee transparant geworden. Maarrr.. dat is slechts schijn, want zodra je ze even selecteert wordt ze terug zwart zoals het hoort.. Ook als je gewoon naar beneden scrollt dan zijn de delen die niet zichtbaar waren wel correct getekend.

    Begrijpt iemand daar iets van? En zoja, hoe zou dit op te lossen zijn?

    Bijdrager
    Norm 2782

    CSS 3 is nog geen officiele standaard. Het W3C is er nog hard aan het werk. Als je je ook bedenkt dat CSS 2 nog niet eens dat alle browsers goed ondersteund word, is het niet gek dat dingen uit de CSS 3 specificatie niet werken…

    Bijdrager
    tijs

    CSS3?

    Bijdrager
    zero200

    wow cool ik wist niet dat ze al aan css3 aan het werk waren!

    probeer ff dit in je css:[code:1:856b68138b]
    div.toolbar ul li.disabled{
    opacity: 0.5; /* CSS3 */
    /* filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); */
    /* for IE 5.5+, has an ugly side-effect on the text */
    }[/code:1:856b68138b]

    dit is zeg maar 100% correct, dus hij zou nu nix raars moeten doen

    of je kan dit proberen (nog beter):[code:1:856b68138b]
    .disabled{
    opacity: 0.5; /* CSS3 */
    /* filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); */
    /* for IE 5.5+, has an ugly side-effect on the text */
    }[/code:1:856b68138b]

    Bijdrager
    junkiesxl

    Der is pas nog een testpakket uigestuurd naar de grote browsers om te kijken of ze al voldoen aan de css3 eisen. Pas nog ergens gelezen.

    Leuk detail was dat Dave Hyatt (ontwikkelaar van Safari) dankzij dat pakket al twee css bugs uit safari had gehaald (nu gaat het wel over de tiger versie denk ik).

    In ieder geval ik zou nog tijdelijk wegblijven van de opacity in css (leuk voor mee te experimenteren maar nog niet voor gebruik) dan kun je beter gebruik maken van een png (hoewel je dan ook weer een hack zult moeten uitvoeren omdeze transparant te maken in IE)

    <edit> Oeps blijkbaar fout gelezen, het gaat nog niet zozeer over css3 maar gewoon over de goede imlementatie van html en css. Had het gelezen op zeldman.com

    Those with long memories will remember ABBA. The rest of us may just about recall the good work of the CSS Samurai when they launched the Acid Test back in 1997 and challenged makers of browsers world-over to improve their support for CSS 1. Well, dammit, we’re at it again. … Acid2 is a brand new test designed to push the limits of HTML, CSS, and PNG support in browsers and authoring tools. … Early feedback is coming in from the likes of Safari developer Dave Hyatt over at Apple. [Hyatt has already used Acid2 to isolate and fix two CSS bugs in Safari.]

    Bijdrager
    lieven

    Toch jammer dat ie het eigenlijk wel juist wil doen, maar toch niet helemaal.. Net ook gemerkt dat opacity niet werkt op table cells, maar wel op divs en list items.
    Het zal inderdaad nog even wachten zijn om het te gebruiken op Safari…

    Over die PNG gebruiken.. da’s dan een half-transparante PNG als achtergrond gebruiken van een laag die over de disabled toolbar items komt? Klinkt ingewikkeld, zeker voor IE.

    Bijdrager
    tennapel

    Opacity wordt absoluut nog nog niet breed of juist ondersteund, Safari 1.0 ondersteund het in ieder geval niet (de versie op Jaguar).

    Semi-transparante png’s werken niet op IE/Win en IE/Mac, dus heb je dan weer javascript nodig om een soort ondersteuning te krijgen.

    De simpelste methode is om 1 gif of jpg te maken waarin je zowel het ‘enabled’ icoon als ‘disabled’ icoon opneemt, en afhankelijk van de class laat je met background-position het juiste plaatje te zien, zie http://www.alistapart.com/articles/sprites/ voor meer uitleg. Dat werkt op iedere browser.

    Bijdrager
    tennapel
    ”junkiesxl”

    Der is pas nog een testpakket uigestuurd naar de grote browsers om te kijken of ze al voldoen aan de css3 eisen. Pas nog ergens gelezen.

    […]

    <edit> Oeps blijkbaar fout gelezen, het gaat nog niet zozeer over css3 maar gewoon over de goede imlementatie van html en css. Had het gelezen op zeldman.com

    Bijna goed:-)

    Het gaat om de “Acid2” test ( http://webstandards.org/act/acid2/ ) een testpagina die toetst op een browser voldoet aan de (meest essentiele) CSS2.1 specificaties (met het voorbehoudb dat de makers van de testpagina niet een interpretatie of coderingsfout hebben gemaakt).

    De Acid1 test is ooit gemaakt om het implementatie van de CSS1 standaard goed (en consistent) te krijgen in browsers en heeft in belangrijke mate bijgedragen aan de sprong voorwaarts op gebied van gebruik van CSS.

    Nu IE versie 7 heeft gemaakt heeft Hakon Wium Lie van Opera in een column op C|Net Microsoft openbaar uitgedaagd om eens serieus werk te maken van een goede ondersteuning van de webstandards (die Microsoft mede heeft bepaald als partij). De Acid2 test is de uitwerking van die uitdaging en is gericht op alle browsers. Op dit moment is er geen enkele browser die de test probleemloos doorstaat, dus moet Acid2 ervoor gaan zorgen dat Opera 8, Firefox2, Safari 3 en IE7 allemaal op dezelfde manier de CSS2.1 specificaties gaan ondersteunen.

    Bijdrager
    lieven

    Nou Moe!

    Safari 1.3 lost het mooi op. Leve opacity!:lol:

    Bijdrager
    tennapel
    ”lieven”

    Nou Moe!

    Safari 1.3 lost het mooi op. Leve opacity!:lol:

    Geen enkele versie van internet explorer ondersteund dit, en 90% van de browsers is nog steeds IE, staar je niet blind op een feature die maar door een paar browsers weergegeven wordt.

    Bijdrager
    zero200

    nou daar heb je het goed fout want maar 65% van de browsers is nu nog maar IE:
    http://www.w3schools.com/browsers/browsers_stats.asp

    Bijdrager
    lieven
    ”tennapel”
    ”lieven”

    Nou Moe!

    Safari 1.3 lost het mooi op. Leve opacity!:lol:

    Geen enkele versie van internet explorer ondersteunt dit, en 90% van de browsers is nog steeds IE, staar je niet blind op een feature die maar door een paar browsers weergegeven wordt.

    Even naar de logs gekeken qua browser-gebruik van de bezoekers (sessies) op ons domein (periode Januari – April 2005)…

    Safari: 30.65%
    Mozilla compatible agent: 25.51%
    Internet Explorer: 8.86%
    Unknown: 8.52%
    Firefox: 7.33%
    En dan nog wat zoek-bots en RSS clients

    Als je de bots en zo negeert kom je hoogst waarschijnlijk aan een 80% van onze werkelijke bezoekers die de opacity zullen kunnen zien…
    Af en toe moet je ook eens verder kijken dan de algemene statistieken en kijken naar je eigen gebruikers…

    of om de link die Zero200 postte te quoteren:

    Global averages may not always be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, other sites attract hobbyists using older low spec computers.

12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.