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.
Related
What techniques can be implemented to improve the performance of a Jquery Mobile web application (no Phonegap, etc. has been used. Just a plain JQM mobile web application)? Things that we have already done include the following.
Minification of JS, CSS files.
Reduced or upto no images using font icons and image sprites.
Removed unwanted/unused CSS using mincss.
Used data-enhanced="true" wherever possible.
Used the latest JQM and JQuery libs (ofcourse =))
Page caching wherever possible.
Image scaling is not done. Different size images are sourced when required.
What else can be done to improve performance? What changes can we do in HTML, CSS and/or Javascript/Jquery/Jquery Mobile to further enhance the performance?
Regards.
Shreerang
A major item that I see missing from your list is reducing the number of elements on the page to the bare minimum. You probably have extra divs, spans, etc. on the page without even realizing it. Not only does the browser have to spend time rendering each element, if the style for a parent element is changed, the style for each child element must be recalculated as well!
A good way to look at your page to view nesting graphically is to check out the page using Firefox's 3D layout view: https://developer.mozilla.org/en-US/docs/Tools/3D_View and check to see if any elements can be removed or combined.
References:
Yahoo best practices: https://developer.yahoo.com/performance/rules.html#min_dom
Google minimizing browser reflow: https://developers.google.com/speed/articles/reflow
I am using CSS media queries to deliver different views of my website. Basically just depending on the width i show/hide certain elements.
Now I also need to move stuff around depending on this width. That means a DOM element must move to a different place in the DOM tree.
Since it contains forms and other unique stuff, I can not just have it in the DOM tree twice and toggle visibility. I really need to move it around, preferably with jQuery.
I have already found this:
http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/
But is it really the only way?
No. It isn't the only way :)
enquire.js - A lightweight, pure JavaScript library for responding to CSS media queries.
intention.js - Offers a light-weight and clear way to dynamically restructure HTML in a responsive manner
No, not the only way.
You can always use js to make the page responsive.
Another good js plugin is response.js
But the most important thing is the concept of how to make effective media queries.
Now the good tendency is making media query based on your page content rather than some fixed width break points.
Here is some interesting articles on this.
7 Habits of Highly Effective Media Queries
Determining breakpoints for a responsive design
You can use the window.onResize event to detect a change in width and work accordingly with that.
You don't need to move the element to a different place in the DOM tree - you need to move it to a different location on the screen. Proper web development has separation of content and presentation - the location of information in the HTML document can have little to do with where it is found on screen. This is not much space to talk about CSS positioning, but I would check out position: absolute, position: fixed and float.
you can use use vanilla js
if (window.innerWidth < 768)
{
//do something here
}
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.
We have a js/html/css widget that we use on our client's web sites and have noticed on some sites, it does not display well due to the css from the page cascading through and messing with the layout, like if the designer of the web site has a bunch of css applied to ALL divs on the page, etc..
Is there an easy way to apply styles to the container of my widget so that the invasive css won't disrupt the layouts?
How do you guys handle this scenario?
Thanks,
This is a common problem. What I use is this: https://github.com/premasagar/cleanslate
A common css reset stylesheet doesn't suffice. Those reset/normalize the browsers default styles. They don't clear those created by the author.
Also, by the same author https://github.com/premasagar/sqwidget - it handles the css resetting plus a few more important things.
While I'm at it, here's another one from the team at Olark: https://github.com/olark/lightningjs It's similar to the last one, but with a few more features, and, therefore, more complex. I haven't used this one.
You could take a look at Shadow DOM. That is perfect for widgets like yours. Shadow DOMs don't allow the parent webpage to access the DOM of your widgets and CSS rules cannot reach your widgets.
I would put the widget in an Iframe that you host yourself. This solves the issue. You can give your clients the code for the embeddable iframe.
This is one of the reasons the big sites, twitter, facebook use iframes for their widgets.
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
My current solution is that for when the user clicks the resize link it adds an extra class to the body tag.
It also sets a cookie and then when the page is loaded - onLoad() - it reads the cookie and reapplys the body class tag again if needs be.
The only thing not ideal is that it loads then applys - the previous solution was to edit the CSS file before the page loaded but that threw up security warnings if the CSS file was in a different directory.
So, essentially is my solution reasonable or is there a better way?
Adam
What is the "best practice"
(accessibility/usability-wise) for
resizing text with Javascript?
Best practise is "Don't".
Specify the font size in relative units and let the native browser controls change it if the user wishes.
Attempts to duplicate this functionality rarely give the font sizes that users need (and usually end up offering a choice atomic, microscopic and tiny). Yes, some users need 72pt text (or larger).
The built in browser controls work on most, if not all, sites. You don't need to use up canvas real estate duplicating them.
Your solution sounds fine, with one addition: you can read the cookie as the page loads and add the class to the body element while the markup is generated. Most server-side languages support this: PHP, JSP, RoR etc.
Other than that, you have a solid solution.
Adding a CSS style to HTML via JavaScript
I think your suggestion is an excellent way of doing it.
It means you have the flexibility of being able to add the CSS class to any sub element rather than the body so that you can change the text size of a specific element if you so desire.
Reading the cookie on page load
To get around the issue you describe I would look for the cookie in your server side language (php/asp/ruby etc) and display the content as specified by the cookie on page load.
In PHP your CSS class definition may look like this:
echo '<div class=\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\">';
What is the "best practice" (accessibility/usability-wise) for resizing text with Javascript?
"Web Accessibility Gone Wild" sums it up quite nicely imho:
If your default font size may be too small for site visitors, then make it an adequate size.
and,
All browsers allow the sizing or scaling of the page content - why duplicate this browser functionality?
Also, Care With Font Size:
The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.
However, if you have a valid reason - feel free to ignore this.