JavaScript is more dynamic than CSS. But how is JavaScript more dynamic than CSS? How does JavaScript coding work in a better way than CSS?
It's two different things. CSS is a stylesheet language while JavaScript is a programming language. It's really like comparing apples and oranges. (Actually, the distinction isn't all that obvious on a technical level, as apparently CSS is even Turing complete, but as most people practically use the term "programming language", they're different.)
But I guess you can argue that JavaScript is more dynamic, in that it is a programming language that can dynamically change both the content and the presentation of your page. You can actually add and remove CSS rules dynamically, in run-time, with JavaScript. You can also alter the attributes of the DOM elements in your page, like classes, IDs etc.
Yeah, CSS is not as dynamic as JavaScript, and the new dynamic selectors do not work in older browers. Then again people won't upgrade if nothing breaks, so go with a pure CSS solution =)
Toggleable menus done with pure CSS usually uses the :selected dynamic selector and styles it with some visible menu element to have it only visible when a hidden checkbox is checked.
While JavaScript can be more flexible because it's a programming language, CSS can perform better because it's built in to the browser. JavaScript can emulate many of the same CSS properties, but CSS will have better performance. It can do things like animation smoother for example.
Many times people will write JavaScript code that sets CSS properties to let CSS do the rendering for that reason.
JavaScript not only stops at making cool design, it does a lot of other things directly to HTML and CSS will only help you with page design things and CSS can't replace your website's action maker, Javascript. I mean... imagine a CSS drop-down menu, haha.
Good question though.
There's significant overlap between their capacities.
Pure CSS3 can be used to build an attractive and responsive menu bar with drop-downs. And you can do the same in pure Javascript. But you may find that HTML+CSS is more expressive in creating layout+style.
Javascript will come in handy when you have to dynamically generate content on the client side (e.g. editor and simulators that run in-browser). You then may find it easier to do (practically) everything in Javascript.
Related
Should I change HTML layouts with JS or CSS?
I see a lot of use of CSS display hiding or showing elements dependent on media queries. Maybe hidden duplicate HTML that appears in a different location on mobile. A hidden mobile menu. Etc etc
But with JS i can have one layout that "morphs" dependent of screen width. No hidden duplicate markup, just moving HTML around.
Is this not a good idea?
Programatic changes on the layout will depend on the robustness and performance of your JS code.
CSS changes depends of the browser's and it's more efficient for sure.
About the enviroment's measure you can act upon them with css media-querys.
You should not forget, that some browsers/users disable JavaScript for security-reasons.
You should use CSS where it is possible. So your Website can be viewed in all Browsers.
If you have to change some styling dynamically, and there are no CSS-alternatives, javascrpit might be the right choice.
It really depends on what you want to do, if it's basic animations, then css is here for you, if it's more advanced animations, then you should use JS, as other users said, keep in mind that some users disable JavaScript for security reasons, but i think they don't exeed 5% of the users , here's some links to help you find out what's best for your use of css or JS :
Myth Busting: CSS Animations vs. JavaScript
CSS Versus JavaScript Animations
For media queries, here's an answer that respond to your question. With the media queries, you won't have to hide anything, you will use a different CSS code for the same part of the HTML, but with different CSS attributes only for mobile/responsive use
For the SEO, here's and experiment that shows that googleBots crawl the Js without problem.
Edit : if you're able to use some server side language(php, asp...), use CSS for the design part, and the server side language for the other things, and only Javascript when you find it usefull. if you can do something with the CSS instead of JS, then do it with the CSS.
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'm relatively new to client-side programming coming from the PHP/MySQL environment. I understand the roles both CSS and JavaScript can play in the browser environment, however, it appears CSS is irreversibly stagnant without JavaScript. I by no means want to create a debate but this is what the situation looks like to me, the "novice." So why not just use only JavaScript to set element attributes/properties? And if so, is this a common practice? (I'm sure CSS is much faster...)
Some general points:
CPU Cost
Running Javascript to apply styles to individual elements will incredibly slow. Javascript is synchronous, so it'll have to update one style at a time. Plus, as mentioned elsewhere, traversing the DOM is computationally expensive. More so if you're applying styles since you're forcing the browser to re-render the site each time you apply a change.
Brain Cost
It's also mentally expensive to try to write and maintain styles in Javascript. It's a functional language never intended to contains the rules of layouts. CSS is just a lot easier to read.
They Cascade!
CSS stands for Cascading Style Sheets. One of the great benefits styles can inherit properties from eachother. Consider the following:
a.nav { font-weight: bold; }
Now all your links with a class of "nav" are bold. But should you wish to further modify a link you'll still be able to:
li a.nav { color: red; }
Now all your a.nav links contained within a list item will be red and bold. It's possible to do this is javascript, but you'd have to force it and maintenance would be horrible.
If you use Javascript for styles your coworkers will beat you to death!
I think this one kind of speaks for itself
Css is for page layout and style.
Javascript is for behavior.
Even if it is possible to completely replace css with javascript, it's not considered standard practice and would be frowned upon severely by most web developers.
Good web development always assumes that a client may have javascript turned off and will provide for a graceful default setting. Replacing css with javascript may make this impossible.
It is far from a common practice, in fact it would probably be viewed as a bad practice!
CSS is used to set the styles of the page and it is rendered when the page loads. Javascript comes into play after the page loads and can manipulate the existing styles and page.
If you were to put it into all JS it would be hugely inefficient! DOM manipulation gets expensive if you do it a lot in JS, and doing all styles in javascript instead of CSS would be lots of manipulation. The load on the client would be ridiculous and there would probably be a noticeable lag in the client as it tried to make all those changes. Plus what happens if a client has javascript disabled? There goes your entire site's look and feel.
Think of CSS as defining how the page looks and should be rendered, and then think of JS as changing that page after it's done rendering. You shouldn't push anything into a javascript that you can do with a simple CSS style up-front.
The real problems with changing out your CSS for javascript would be maintainability and performance. CSS makes it very simple to find a single elements styling, and change it, without effecting the rest of your page. Javascript would become cumbersome at best for even a simple page, and completely unmanageable for a more complex page.
On the performance side, any time javascript is executing, your page will "freeze". Considering a page with 1000 elements needing laid out, your execution time might easily grow to a minute or more, depending on the complexity of the layout. CSS would handle this natively, and without any "freezing" of your browser. This would cause your page to be unusable for the first bit of time that a person visits, and (according to statistics) you only have 10 seconds to capture the attention of your viewer before they become disinterested in your page and leave, meaning you drive away all your new visitors.
The only time you should use JavaScript for setting style properties is when you need to change the style at runtime. You should always use CSS for styling where possible because:
CSS tends to be implemented a lot more consistently across browsers than JS
A user may have JS disabled
The "code" to do styling in CSS is a lot terser, and easier to read/write than the equivalent JS code