You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Carsten Pieper <ca...@continentale.de> on 2008/02/08 11:10:05 UTC
[Trinidad] Skinning - can't get browser hacks working...
Hi,
in some cases the nice @agent feature can't help your skinning efforts for
different browsers, for example if you want to
differentiate between different versions of Internet Explorer (see this
thread:
http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html)
or if you want to skin icons (see
http://myfaces.apache.org/trinidad/devguide/skinning.html,
section Skinning CSS features).
In these cases, I planned to fall back on those nasty browser hacks but they
seem to
be ignored by the Trinidad skinning (I'm on Trinidad 1.0.5), i.e. I can't
see any
effects (neither in the rendered pages nor in the generated CSS).
I tried the "star html hack" (to include CSS in IE <= 6)
* html .mySelector {...}
as well as the "negation pseudo class hack" (to exclude CSS from IE)
html:not([dummy]) .mySelector {...}
In the above mentioned forum thread Sven gave an example for
star html hack usage in a Trinidad style sheet
(http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html#a13590541).
I tried the CSS snippet given there, too, but to no avail...
To give another simple example. Assume that I might want my default font
size to
be bigger in IE (no, I don't really want that, just to keep the example
simple; in reality I want to skin icons...)
/* general setting */
.AFDefaultFont:alias {font-size: 12px;}
/* make it bigger for IE */
@agent ie {
.AFDefaultFont:alias {font-size: 15px;}
}
This works fine, as described in the Developer's Guide. However, if I
replace the @agent with the star html hack I see no effects:
/* the star html hack, doesn't work for me here */
* html .AFDefaultFont:alias {
font-size: 15px;
}
Do you have any ideas? Any hint appreciated!
Thanks, Carsten
--
View this message in context: http://www.nabble.com/-Trinidad--Skinning---can%27t--get-browser-hacks-working...-tp15352483p15352483.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.
Re: [Trinidad] Skinning - can't get browser hacks working...
Posted by Jeanne Waldman <je...@oracle.com>.
There was a recent fix for the @agent/@platform for icons.
Carsten Pieper wrote, On 2/11/2008 5:42 AM PT:
> And again...
>
> Browser hacks don't help with skinning icons! Which isn't too surprising
> when
> you consider how icon skinning things are treated...
>
> For example I have the following:
>
> /* This looks fine in IE6 but not in FF2. In FF2 "margin-top: -12px" would
> have been appropriate. Note: @agent doesn't work for icons... */
> af|inputDate::launch-icon {
> content: url(/css/images/dateInput.gif);
> margin-top: -3px;
> margin-left: -9px;
> }
>
> Those settings don't end up in the generated .css files but in the rendered
> pages source code :
>
> /jsf-prototype/css/images/dateInput.gif
>
> Thus, whatever browser hack you might try (e.g. "* html
> af|inputDate::launch-icon ...)
> - and which well makes it to the generated .css - is overwritten by the
> img's
> style-attribute :-(
>
> Has anyone have any clue how to skin icons for different browsers currently?
>
> Thanks, Carsten
>
>
>
> Carsten Pieper wrote:
>
>> Myself back again,
>>
>> some new knowledge on the topic:
>>
>> I tested the browser hacks on a global selector (.AFDefaultFont:alias).
>> For
>> those, the hacks didn't work as I reported in my first posting.
>>
>> I jsut noticed today, that on "normal" selectors, they're working fine.
>> Example:
>>
>> * html af|panelHeader::level-one {
>> color: magenta;
>> }
>>
>> Et voilà, a magenta colored heading text appears in IE6.
>>
>> Further investigation showed, that the appearance of the ":alias"
>> pseudo-class breaks the browser hacks. It's not only a problem of those
>> global selectors (see
>> http://myfaces.apache.org/trinidad/skin-selectors.html#Global%20Selectors)
>> but of one's own :alias stuff as well...
>>
>> The bottom line is, that those browser hacks have to be introduced on
>> "feature level".
>>
>> A question to the experts: Has this been done purposely or unconsciously?
>> Should this
>> behaviour be changed? Or do you feel it shouldn't be touched as browser
>> hacks won't be
>> needed anymore once http://issues.apache.org/jira/browse/TRINIDAD-495
>> (@platform
>> support for skinning icons) and
>> http://issues.apache.org/jira/browse/TRINIDAD-799
>> (Add agent version support in skinning) are resolved?
>>
>> Thanks, Carsten
>>
>>
>> Carsten Pieper wrote:
>>
>>> Hi,
>>>
>>> in some cases the nice @agent feature can't help your skinning efforts
>>> for
>>> different browsers, for example if you want to
>>> differentiate between different versions of Internet Explorer (see this
>>> thread:
>>> http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html)
>>> or if you want to skin icons (see
>>> http://myfaces.apache.org/trinidad/devguide/skinning.html,
>>> section Skinning CSS features).
>>>
>>> In these cases, I planned to fall back on those nasty browser hacks but
>>> they seem to
>>> be ignored by the Trinidad skinning (I'm on Trinidad 1.0.5), i.e. I can't
>>> see any
>>> effects (neither in the rendered pages nor in the generated CSS).
>>>
>>> I tried the "star html hack" (to include CSS in IE <= 6)
>>> * html .mySelector {...}
>>>
>>> as well as the "negation pseudo class hack" (to exclude CSS from IE)
>>> html:not([dummy]) .mySelector {...}
>>>
>>> In the above mentioned forum thread Sven gave an example for
>>> star html hack usage in a Trinidad style sheet
>>> (http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html#a13590541).
>>> I tried the CSS snippet given there, too, but to no avail...
>>>
>>> To give another simple example. Assume that I might want my default font
>>> size to
>>> be bigger in IE (no, I don't really want that, just to keep the example
>>> simple; in reality I want to skin icons...)
>>>
>>> /* general setting */
>>> .AFDefaultFont:alias {font-size: 12px;}
>>>
>>> /* make it bigger for IE */
>>> @agent ie {
>>> .AFDefaultFont:alias {font-size: 15px;}
>>> }
>>>
>>> This works fine, as described in the Developer's Guide. However, if I
>>> replace the @agent with the star html hack I see no effects:
>>>
>>> /* the star html hack, doesn't work for me here */
>>> * html .AFDefaultFont:alias {
>>> font-size: 15px;
>>> }
>>>
>>> Do you have any ideas? Any hint appreciated!
>>>
>>> Thanks, Carsten
>>>
>>>
>>>
>>>
>>
>
>
Re: [Trinidad] Skinning - can't get browser hacks working...
Posted by Carsten Pieper <ca...@continentale.de>.
And again...
Browser hacks don't help with skinning icons! Which isn't too surprising
when
you consider how icon skinning things are treated...
For example I have the following:
/* This looks fine in IE6 but not in FF2. In FF2 "margin-top: -12px" would
have been appropriate. Note: @agent doesn't work for icons... */
af|inputDate::launch-icon {
content: url(/css/images/dateInput.gif);
margin-top: -3px;
margin-left: -9px;
}
Those settings don't end up in the generated .css files but in the rendered
pages source code :
/jsf-prototype/css/images/dateInput.gif
Thus, whatever browser hack you might try (e.g. "* html
af|inputDate::launch-icon ...)
- and which well makes it to the generated .css - is overwritten by the
img's
style-attribute :-(
Has anyone have any clue how to skin icons for different browsers currently?
Thanks, Carsten
Carsten Pieper wrote:
>
> Myself back again,
>
> some new knowledge on the topic:
>
> I tested the browser hacks on a global selector (.AFDefaultFont:alias).
> For
> those, the hacks didn't work as I reported in my first posting.
>
> I jsut noticed today, that on "normal" selectors, they're working fine.
> Example:
>
> * html af|panelHeader::level-one {
> color: magenta;
> }
>
> Et voilà, a magenta colored heading text appears in IE6.
>
> Further investigation showed, that the appearance of the ":alias"
> pseudo-class breaks the browser hacks. It's not only a problem of those
> global selectors (see
> http://myfaces.apache.org/trinidad/skin-selectors.html#Global%20Selectors)
> but of one's own :alias stuff as well...
>
> The bottom line is, that those browser hacks have to be introduced on
> "feature level".
>
> A question to the experts: Has this been done purposely or unconsciously?
> Should this
> behaviour be changed? Or do you feel it shouldn't be touched as browser
> hacks won't be
> needed anymore once http://issues.apache.org/jira/browse/TRINIDAD-495
> (@platform
> support for skinning icons) and
> http://issues.apache.org/jira/browse/TRINIDAD-799
> (Add agent version support in skinning) are resolved?
>
> Thanks, Carsten
>
>
> Carsten Pieper wrote:
>>
>> Hi,
>>
>> in some cases the nice @agent feature can't help your skinning efforts
>> for
>> different browsers, for example if you want to
>> differentiate between different versions of Internet Explorer (see this
>> thread:
>> http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html)
>> or if you want to skin icons (see
>> http://myfaces.apache.org/trinidad/devguide/skinning.html,
>> section Skinning CSS features).
>>
>> In these cases, I planned to fall back on those nasty browser hacks but
>> they seem to
>> be ignored by the Trinidad skinning (I'm on Trinidad 1.0.5), i.e. I can't
>> see any
>> effects (neither in the rendered pages nor in the generated CSS).
>>
>> I tried the "star html hack" (to include CSS in IE <= 6)
>> * html .mySelector {...}
>>
>> as well as the "negation pseudo class hack" (to exclude CSS from IE)
>> html:not([dummy]) .mySelector {...}
>>
>> In the above mentioned forum thread Sven gave an example for
>> star html hack usage in a Trinidad style sheet
>> (http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html#a13590541).
>> I tried the CSS snippet given there, too, but to no avail...
>>
>> To give another simple example. Assume that I might want my default font
>> size to
>> be bigger in IE (no, I don't really want that, just to keep the example
>> simple; in reality I want to skin icons...)
>>
>> /* general setting */
>> .AFDefaultFont:alias {font-size: 12px;}
>>
>> /* make it bigger for IE */
>> @agent ie {
>> .AFDefaultFont:alias {font-size: 15px;}
>> }
>>
>> This works fine, as described in the Developer's Guide. However, if I
>> replace the @agent with the star html hack I see no effects:
>>
>> /* the star html hack, doesn't work for me here */
>> * html .AFDefaultFont:alias {
>> font-size: 15px;
>> }
>>
>> Do you have any ideas? Any hint appreciated!
>>
>> Thanks, Carsten
>>
>>
>>
>
>
--
View this message in context: http://www.nabble.com/-Trinidad--Skinning---can%27t--get-browser-hacks-working...-tp15352483p15411703.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.
Re: [Trinidad] Skinning - can't get browser hacks working...
Posted by Carsten Pieper <ca...@continentale.de>.
Myself back again,
some new knowledge on the topic:
I tested the browser hacks on a global selector (.AFDefaultFont:alias). For
those, the hacks didn't work as I reported in my first posting.
I jsut noticed today, that on "normal" selectors, they're working fine.
Example:
* html af|panelHeader::level-one {
color: magenta;
}
Et voilà, a magenta colored heading text appears in IE6.
Further investigation showed, that the appearance of the ":alias"
pseudo-class breaks the browser hacks. It's not only a problem of those
global selectors (see
http://myfaces.apache.org/trinidad/skin-selectors.html#Global%20Selectors)
but of one's own :alias stuff as well...
The bottom line is, that those browser hacks have to be introduced on
"feature level".
A question to the experts: Has this been done purposely or unconsciously?
Should this
behaviour be changed? Or do you feel it shouldn't be touched as browser
hacks won't be
needed anymore once http://issues.apache.org/jira/browse/TRINIDAD-495
(@platform
support for skinning icons) and
http://issues.apache.org/jira/browse/TRINIDAD-799
(Add agent version support in skinning) are resolved?
Thanks, Carsten
Carsten Pieper wrote:
>
> Hi,
>
> in some cases the nice @agent feature can't help your skinning efforts for
> different browsers, for example if you want to
> differentiate between different versions of Internet Explorer (see this
> thread:
> http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html)
> or if you want to skin icons (see
> http://myfaces.apache.org/trinidad/devguide/skinning.html,
> section Skinning CSS features).
>
> In these cases, I planned to fall back on those nasty browser hacks but
> they seem to
> be ignored by the Trinidad skinning (I'm on Trinidad 1.0.5), i.e. I can't
> see any
> effects (neither in the rendered pages nor in the generated CSS).
>
> I tried the "star html hack" (to include CSS in IE <= 6)
> * html .mySelector {...}
>
> as well as the "negation pseudo class hack" (to exclude CSS from IE)
> html:not([dummy]) .mySelector {...}
>
> In the above mentioned forum thread Sven gave an example for
> star html hack usage in a Trinidad style sheet
> (http://www.nabble.com/Skinning-for-specific-%40agent-_versions_---to13572999.html#a13590541).
> I tried the CSS snippet given there, too, but to no avail...
>
> To give another simple example. Assume that I might want my default font
> size to
> be bigger in IE (no, I don't really want that, just to keep the example
> simple; in reality I want to skin icons...)
>
> /* general setting */
> .AFDefaultFont:alias {font-size: 12px;}
>
> /* make it bigger for IE */
> @agent ie {
> .AFDefaultFont:alias {font-size: 15px;}
> }
>
> This works fine, as described in the Developer's Guide. However, if I
> replace the @agent with the star html hack I see no effects:
>
> /* the star html hack, doesn't work for me here */
> * html .AFDefaultFont:alias {
> font-size: 15px;
> }
>
> Do you have any ideas? Any hint appreciated!
>
> Thanks, Carsten
>
>
>
--
View this message in context: http://www.nabble.com/-Trinidad--Skinning---can%27t--get-browser-hacks-working...-tp15352483p15409883.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.