Does jQuery - or one of it's plugins - have equivalent functionality to the YUI StyleSheet Utility?
"The StyleSheet Utility is capable of creating new stylesheets from scratch as well as modifying the existing stylesheets held as properties of elements sourced from the same domain or any inline elements."
This (I'm fairly sure) is creating and modifying CSS stylesheets themselves not looping through the DOM and changing element's style property (as the jQuery.css() method does).
I think this technique has the potential to significantly change the way a lot user interface related Javascript is written so would be interested to hear about any other libraries where it's been implemented too.
Found a couple that look like they do similar things. I haven't tested them. jQuery.Rule looks to be pretty good though
jQuery.Rule by Ariel Flesler
This plugin allows quick creation/manipulation of CSS Rules, in a "jQuery-way". It includes features like chaining, iteration using each, selectors with context.
GlobalStylesheet by Jeremy Lea
Enables CSS modification that uses a 'global' stylesheet, rather than inline CSS. This is particularly handy for modifying CSS styles that you want to remain persistent until a page is refreshed again.
The short answer is no. YUI is the avant garde in this matter.
However I fully expect there to be something similar being made in the coming weeks(months), as the methodology that YUI is using does not seem to be unreplicable and considering how useful and important this feature is.
Maybe study YUI's method and make a plugin yourself?
Edit: Looks like I'm wrong. This is why you never post negatives like this. :)
Related
I am a beginner in web-designing. I use css, javascript, jquery for web development.
There are times when an effect can be achieved with all of the three. Like a simple mousehover effect can be achieved with css :hover, javascript's onmousehover(), and jquery's $(#id).hover()
jquery fade-in, fade-out effect can also be simulated using css transition.
My question is: If an effect can be achieved using all three. Do i need to give preference to stylesheet language or javascript or jquery. using which among above will increase performance and will load the webpage faster.
First of all give a preference to that way which you can do faster (computers cost a little, programmer cost a lot). Also pay attention of how you do it - if you have to write tons of css code instead of couple lines in jQuery - use jQuery for sure.
css speed > javascript speed > jquery speed. As i seen some benchmarks native js is like 10-100 times faster than jQuery (depending on browser/selectors etc...).
Depending on situation - if you really need to optimize your interface -> find a bottlneck first, dont't optimize too early, it's evil
jquery has the advantage of working across multiple browsers but suffers some slowdowns to do this. A custom javascript solution may or may not work on all browsers, but it might be faster than jQuery if you're really good at writing fast javascript. Using css to achieve an effect has the advantage of working on all browsers that comply to the css standard and browsers should be highly optimized to render css very fast.
I think it's more an issue of what browsers you want to support, personal preference and coding styles than it is an issue of speed, but here is some information and benchmarks:
Which is faster? - modifying css property or adding class in jquery
http://jsperf.com/jquery-css-vs-native-dom/16
http://jsperf.com/jquery-css-vs-css/4
http://jsperf.com/jquery-css-vs-getcomputedstyle/2
Edit: Agree with Sergio, early optimization is the root of all evil. Write the code first, look for bottlenecks and treat them last.
Depends on what you want to achieve or the scenario.
I personally like css,but sometimes to achieve cross browser compatibility or some fancy effects i use jquery.
Jquery can be customized a lot,lots of options are also available,but it affects the page loading time. I prefer jquery or javascript.
With CSS3,lots of effects that could only be done with jquery are achievable now,but it only supports modern browsers.
I am a beginner web-designer. I know the basics of HTML, CSS and Javascript. I know that CSS used to style HTML docs, but is that the only way ? Can I use JavaScript to style HTML, somehow ? Or Is there any other way rather than CSS ?
JavaScript is a scripting language, not a styling language. While you can use JavaScript to apply CSS, it's still CSS, not JavaScript, that's defining the styles.
There exist HTML presentational attributes from a long time ago, but those have been superseded by CSS. You can still use them, not that you would want to, considering they'll most likely get translated to CSS anyway.
There also exist CSS preprocessors with custom languages, such as Sass/SCSS, LESS and Stylus, but they all compile to CSS as well, because that's what's actually implemented by browsers. So even if you use these preprocessors, at the end of the day you're still "writing" CSS.
I know that CSS used to style HTML docs, but is that the only way ?
It is the only sensible way
Can I use JavaScript to style HTML, somehow ?
You can generate CSS with JavaScript. (Not advisable for general styling).
You can use JSSS if you're only targeting Netscape 4.x.
You're also able to style HTML with HTML-attributes itself, but this way is pretty impractical and old-fashioned. Most of these techniques are deprecated and the functionality is VERY limited.
I suppose the correct answer to your question is no, because html includes some basic style elements itself. But CSS is the best way to style your documents and you absolutely should learn and use it. Once you're comfortable using CSS, try using a framework such as Twitter bootstrap to make your life easier.
It's not the only way but the recommended way.
You can include styling in your html tags but it becomes messy.
That's why CSS was invented so use it !
As mentioned previously, CSS is not the only way to stylize HTML but definitely the standard. If you're looking for a more programmatic way utilizing JavaScript you can look into less which (taken directly from the webpage) ...extends CSS with dynamic behavior such as variables, mixins, operations and functions and functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
I've just learned javascript and jquery a few weeks ago, since then I always use it to position all my divs and stuff in the screen by knowing the size of the screen and the window which I find extremely useful, but now I don't know if is this a good practice, cause it makes my web-pages fully dependant on jquery which I don't know if it may cause some troubles with different browsers.
I would really like to find answers like "Sure is a good practice, use all the scripts you want" cause I'm really loving this javascript stuff but well just tell what you think.
Use JavaScript for behaviors and CSS for styling.
Styling with JavaScript is slower and difficult for another developer/designer to figure out what you did.
Also if you use Firebug or Chrome Web Inspector you can not see where your styling is coming from.
Optionally set classes from JavaScript and not specific styling. You can transition between classes to create a nice effect. But at least your colleague can see where the styles are defined and change it.
I'm sorry, but I'm going to burst your bubble, somewhat.
It's somewhat OK to do it - as long as the page looks OK if you disable Javascript, as well. I would say it should look even better than OK. I would also say that you should only do that if the functionality of your site really demands Javascript, as well.
Keep in mind that a certain percentage of users will have Javascript disabled. I've seen sites that look horrible this way (I use NoScript on Firefox, and selectively enable Javascript as I browser), and a couple where nothing at all appears without JS enabled.
Bad.
As Darin notes, you can (and should!) use CSS for positioning and styling. That is what it was made for! Feel free to enhance the page with Javascript, but keep in mind what I say above!
You could use CSS for positioning and styling of elements. That's what it was designed for.
It's okay to use it for positioning in some cases, but using CSS is the better practice whenever applicable.
Well, In my opinion you should avoid it as often as possible. But I know sometime you don't have the choice.
And yea you can make great web apps using scripts.
It depends what you're positioning.
CSS should be your first choice for positioning standard, run-of-the-mill sections and elements of a webpage. To opt for JavaScript in these cases suggests a lack of understanding of CSS.
Likewise if you find yourself using JS to position things for different devices. Again, CSS has evolved; media queries came along for that. Rule: always exhaust CSS possibilities first.
That said, it would be oversimplification to suggest that JavaScript never be used for positioning. All of us, rightly or wrongly, have resorted (and it is just that, resorting) to JS in order to get things to look right cross-browser, particularly where support for older IEs is concerned.
But by far the biggest use case for JS positioning is for modern web aps and games. If you're building a game with random asteroids dotted around, JS is absolutely the choice for that, since the positions are based on calculation and computation.
Finally, bear in mind that when you position in JS, you are of course still using CSS. JS doesn't have its own, concurrent styling/positioning system - it simply sets CSS properties. It is simply able to do so more dynamically and conditionally than flat CSS.
It is almost certainly bad practise. Use CSS for styling - JavaScript to do this is slower, more work, and more prone to breaking.
If you're positioning everything absolutely (fixed coordinates) it won't look good on screens of different resolutions. There's no real answer to this question.. scripts have their place, and you can use all the scripts you want... Positioning all of the elements of your layout, however, is not a job for JS. Use CSS for that.
I'd start here: Starting with HTML + CSS
There is not one method for all situations. Each web application needs to employ the right tools and practices to achieve its goals. This varies so much between applications that there is not a "correct" answer to your question.
I want to apply ALL the CSS styles 100% with JQuery/JavaScript
But is is bad idea to do this?
Why would you create that overhead in javascript when straight HTML/CSS is fully capable of handling it? (in fact intended to)
Also, you're adding an unnecessary requirement to the styling of your site: having javascript enabled.
Main reason IMHO: Performance! Native CSS is much faster than JS.
Also worth mentioning:
Doesn't work for users with NoScript etc.
Overhead. Not such a big deal i think. There are more important things to optimize.
If you lazy load stuff, e.g. by using jQuery.load(), you have to reapply your styles to these elements. Not nice :/
Conclusion: CSS is made for styling, JS isn't.
If your visitor has javascript disabled, they'll see an ugly white page without any styling.
I don't see why you would do this, to be honest. It's not user-friendly.
Use a stylesheet.
A lot of people say to apply classes not individual styles.
You will see varying levels of performance degradation across different browsers. It's faster and cleaner to let the application render the styled HTML page because that's what it's optimized to do.
If you're dynamically loading content and already have fade effects/transitions so your content is only revealed after it's styled, you might be ok.
if you are going to do this, only apply styles with jQuery (rather than using javascript) to maintain cross-browser compatibility.
I would recommend against your approach because of the time it will take jQuery to loop through all of your elements and apply styles.
something like $('span').css(...); has to traverse the entire DOM and loop through a collection of elements. $('#title').css(...); does not have to loop through the entire DOM because it immediately knows where to look.
Also, browsers are designed to process stylesheets and render your styled elements very quickly.
I already make extensive use of prototype and don't want to add an extra framework like YUI.
I need a javascript calendar which enables me to customize rendering of calendar-cells on a cell by cell basis. (For rendering events, prices, etc. on a certain date) .
YUI Calendar makes this possible, but I already make extensive use of prototype and don't want to add an extra framework like YUI.
Does anyone know a good alternative?
Thanks,
Brits
Here's one: CalendarView and another CalendarDateSelect.
Have you thought of upgrading from Prototype to YUI or jQuery? Both would give you a lot more functionality than prototype and both have excellent calendar options.
If you've got the time, you can build your own. I've personally used this blog entry to create my own and it works beautifully. The code doesn't use Prototype, but as I was walking through it I converted the whole thing into a Prototype class and used all the nice features of Prototype to make the code look better. And best of all, you know exactly what the tag classes are so you can customize it completely (personally it is easier for me to code the CSS as I go rather than trying to reverse engineer a pre-built one, besides, the equivalent jQuery one may be too much or too little for what you want).
I've used jscalendar before, which works well.
As far as I know, Prototype is a collection of helper functions, but it has no widgets.
YUI is a total different beast (there's a minor overlapping in DOM methods).
We use Prototype for Ajax calls and YUI for widgets (calendar, dialogs, grid).