Re: [jQuery] Off topic : javascript css
Thank you all for the response, I'll try to mold all the information in an article. To summarize the thread: - use document.writeln( '' ); to import javascript css file - style all essential css in the plugin/general javascript code. -- David Duymelinck [EMAIL PROTECTED] ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Off topic : javascript css
Brandon Aaron schrieb: > I would suggest using a seperate style sheet. Keeping styles where > they belong (style sheet) makes the whole application/web site more > flexible and I'm not just talking about screen styles. Yes. Mentioning media types is a good idea: In IE inline styles can't be overruled (in modern browsers you can use the !important delaration). That means if you set 'display: none' in a script you won't be able to print that element any longer, i.e. it is not accessible. That may not be important in all cases and for all plugins, but there are cases where it is. I took care of that in the tabs plugin for example. If you print a page you most likely want to print the content of all the tabs and not only the one that is currently selected. So tabs uses classes to hide elements, and if animations are used the properties that were altered for the animation are resetted. -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Off topic : javascript css
David schrieb:
> What i understand from Brandon and Jörn, thank you for the quick
> reaction, is that it's better to have something like
>
> $(function(){
> $('head').append(' type="text/css">');
> });
>
> Than using css styles in the plugins. I understand how you could have
> performance issues with inline styles.
I hope someone who actually worked with something like that shares his
experience here.
> So the best way to style plugin
> elements is to use classes and ids as much as possible.
>
IDs would only work with applications like Thickbox, where only one
instance can be active at the same time. In most other cases, it might
be good to mark a container with a class and style the children accordingly.
--
Jörn Zaefferer
http://bassistance.de
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Off topic : javascript css
> $(function(){
>$('head').append('');
> });
That's pretty dangerous. The CSS file will load asynchronously, and you
won't know when it's done. In the meantime, any content in the page may
render unstyled. You are likely to get a flash of unstyled content which is
then reformatted when your CSS file finishes loading.
If you want to load CSS dynamically, it's much better to do it with
document.writeln from code running in the document HEAD:
document.writeln( '' );
This way the CSS file behaves just like any other CSS file loaded directly
from HEAD: no content will be rendered until the CSS is ready.
-Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Off topic : javascript css
> What i understand from Brandon and Jörn, thank you for
> the quick reaction, is that it's better to have something like
>
> $(function(){
>$('head').append('type="text/css">');
> });
>
> Than using css styles in the plugins. I understand how you
> could have performance issues with inline styles. So the best
> way to style plugin elements is to use classes and ids as
> much as possible.
When I am writing plugins, I use jQuery for style properties of things that
*must* be there for the plugin to work properly. For example, I might have
an element that has to be position:absolute, but also can be visually styled
by the user for things like color or width. In that case I have the
.css({position:absolute}) wired into the plugin but the user can style the
remainder of the CSS properties by id or class. That way it will kinda-sorta
work even if the user forgets to put in css rules for it.
I do think it is better to use css for properties that are already supported
by css. For example, if you are writing a plugin that needs to know the
minimum width of an element, it is better to use .css("min-width") than to
pass that information to the plugin using options. Even IE6, which doesn't
honor min-width, will give you the value specified for min-width in a css
rule.
The main drawbacks to external stylesheets are complexity and Murphy's Law.
If there are two pieces to your plugin, the odds are high that someone will
grab only one piece and then wonder why it doesn't work. Also, in the
example you give it is actually not requesting that stylesheet until
document.ready fires, which is pretty late in the game. There's a chance
that the document will be displayed before that stylesheet has been
processed and that could make the document look weird for a second or two.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Off topic : javascript css
Brandon Aaron schreef:
> I would suggest using a seperate style sheet. Keeping styles where
> they belong (style sheet) makes the whole application/web site more
> flexible and I'm not just talking about screen styles.
>
Jörn Zaefferer schreef:
> The best approach may be to load an additional stylesheet only when
> necessary. That allows you to define your styles in the most natural
> way, avoid tons of inline styles. The latter may not be obvious, but
> could cause serious performance problems.
What i understand from Brandon and Jörn, thank you for the quick
reaction, is that it's better to have something like
$(function(){
$('head').append('');
});
Than using css styles in the plugins. I understand how you could have
performance issues with inline styles. So the best way to style plugin
elements is to use classes and ids as much as possible.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Off topic : javascript css
I would suggest using a seperate style sheet. Keeping styles where they belong (style sheet) makes the whole application/web site more flexible and I'm not just talking about screen styles. -- Brandon Aaron On 10/22/06, David <[EMAIL PROTECTED]> wrote: > Hello everyone, > > There is a thought that's flowing through my head for a few days. At > work I did a autocomplete plugin. To style the suggestbox and the > content I used a variable to fill the style attribute. Then it hit me > many plugins use css to style their added elements. > > My question is, why use static css if it is useless when javascript > isn't enabled? Isn't it better practice to include the css styles in the > javascript code to keep the css files as clean as possible? > > I hope to get some feedback on this so i can make an article out of it. > > David > > > ___ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
[jQuery] Off topic : javascript css
Hello everyone, There is a thought that's flowing through my head for a few days. At work I did a autocomplete plugin. To style the suggestbox and the content I used a variable to fill the style attribute. Then it hit me many plugins use css to style their added elements. My question is, why use static css if it is useless when javascript isn't enabled? Isn't it better practice to include the css styles in the javascript code to keep the css files as clean as possible? I hope to get some feedback on this so i can make an article out of it. David ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Off topic : javascript css
David schrieb: > Hello everyone, > > There is a thought that's flowing through my head for a few days. At > work I did a autocomplete plugin. To style the suggestbox and the > content I used a variable to fill the style attribute. Then it hit me > many plugins use css to style their added elements. > > My question is, why use static css if it is useless when javascript > isn't enabled? Isn't it better practice to include the css styles in the > javascript code to keep the css files as clean as possible? > > I hope to get some feedback on this so i can make an article out of it. > The best approach may be to load an additional stylesheet only when necessary. That allows you to define your styles in the most natural way, avoid tons of inline styles. The latter may not be obvious, but could cause serious performance problems. -- Jörn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
