Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am looking to make a slightly responsive design. I was curious to know how people feel on loading a responsive design, should I load in a new css file and use JS to define the screen size. Or should I create media queries inside the current css file and just go from there. Looking for opinion on speed and what people feel is the more optimal approach.
Putting everything regarding styles in the CSS files is the best practice.
HTML => Structure
CSS => Styles
JS => Logic
The more you separate concerns, the easier your code will be to mantain.
As javascript might be disabled you should use CSS-only for the responsive purposes.
If you really can't do without javascript (for moving an element in the dom for example) make sure that you've got some fallback css for non-js-enabled users.
In fact very very few users will disable javascript, unless they are in emergency(say, if they only have outdated mobile phone because their new ones have run out of batteries). If your site is not toward these situations, use javascript without concerning that users will disable.
Generally, putting media queries in one css file will be a good choice if the file size is reasonalbe, since one file makes fewer request than seperated files.
Javascript, on the other hand, is the very fallback because old IEs do not support media queries.
You can refer to some frameworks such as bootstrap. An implementation outdoes all answers.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am new the css front-end programming, I am applying the css into my web pages, and using bootstrap, but I found that a sentences described as the title, I don't understand the meaning of "masthead pdng-stn1" and the meaning of "phone-box". I can't find the definition of them in the bootstrap.css and all of the css files in my folders, but they can't be deleted otherwise the web pages can't display properly, please give help, thanks a lot!
Welcome to StackOverflow! I would recommend browsing the How to Ask a Good Question documentation. That said, generally "classes" are just a way to group/categorize elements on a page and apply like-styles to them. pdng-stn1 is clearly a poorly thought out name, and whatever it means would have made more semantic sense, like pudding-stain1 or whatever. They're not necessarily related to Bootstrap in any way. masthead is often synonymous with header or page-top, something like that. You really just need to dive through the source code, or read the documentation that comes with whatever frameworks your website is using.
If you'd like you can read up on the basics of CSS Class Selectors. They're essentially entirely arbitrary and are chosen based on the current developer's needs and desires for structure, or for integration/semantic similarity with the current framework.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm currently developing a web application and I was forced to use jQuery for some animations and other specific purposes, but still most of my code is written in JavaScript.
Should I rewrite these JavaScript modules if after all jQuery is being loaded every time? I know that in some cases it is better to use JavaScript instead of jQuery because it is faster and some other advantages but I'm already using jQuery throughout the page and I'm wondering should I use it everywhere instead of loading the whole library for few chunks of code.
Will there be any significant difference in the performance if the library is already loaded?
There won't be any difference, the Javascript speed is better. The performances wihout libraries still better. So keep your modules
Its up to you.
If you don't like to use any JS library, then you have code a lot.
The current jQuery v1.12.2(supports IE 6,7,8) size is 97kb. You use CDN version to reduce the loading time of it.
Will it affect the performance?? Yes, a bit it will do.
You didn't mention whether you are making any XMLHttpRequest;
if so, its better to use jQuery for better cross browser compatibility.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
For example, I can use CSS to implement a navigation. And I can do that via JS too. And in many situations CSS and JS both perform well.
Which one is the good choice for web design?
A good rule of thumb is: If you can do it with CSS, go for it.
Philosophically, CSS should be focused on presentation and JavaScript should be geared more towards function.
Of course, It depends. While CSS is much easier to implement than javaScript in most cases, easier doesn't always translate to better. One good example are CSS animations vs a javaScript library like velocity.js. You have far greater control over your animations and generally better performance across all devices with frameworks like velocity or GSAP, but often it comes down to each individual project and which technology would make sense for your particular needs. Realistically, however, most projects will implement both technologies in the best cases where they fit. I hope this helps. For more info on this here's a link that does a great job explaining some of the differences when animating: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ .
And here is a similar question with very good answers: Better or Worse: Styling with JavaScript vs CSS
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm wondering in what cases is this better to use JS when a pure css solution is possible. I've been browsing other questions but couldnt find the answer I was looking for.
Suppose we have images and want to display some stuff on hover. Should one use :
Example :
$('div.some-class').mouseover(function(){
$(this).children('.some-class').removeClass('hidden');
});
or is this CSS solution better:
div:hover > .my-elem{
opacity:1;
});
imho, the second solution is way better but i've been using the first one for couple of months and I just found out about the second one a week ago, so i'm not totally sure if it's a valid practice.
The CSS solution is better for 2 reasons:
CSS is loaded alongside the HTML, whereas JavaScript is loaded after the page itself has loaded. For things like a hover this isn't a huge issue, but if you're directly setting static styles you'll notice a delay between the content loading and the JavaScript running.
It's common for users to disable JavaScript. With JavaScript disabled, your mouseover function would never fire, whereas the CSS would work regardless.
However that said, img elements cannot contain children, so both your CSS and JavaScript is invalid.
Case 1: Prefer CSS to JS
1. CSS 3 is a mixture of CSS+JS and this enables you to develop your code faster rather than writing your own custom JS.
2. Prevents you from querying the DOM.
3. Loads alongside with your HTML (faster than JS)
Case 2: Prefer JS to CSS
1. This will help you when working with old browsers which don't have CSS3 support.
2. Helps you to handle other DOM functionality which CSS still doesn't have support. (for eg: you can change the color of some other element on hover of your element in CSS, but can't make any changes to JS variables or logic)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have seen some cool slides in html, but some are CPU-consuming or browser-dependent.
Since I am not very familiar with html5, I'd like to know what's the best practice or existing framework of making html slides.
And here is a more creative one similar to Prezi: http://bartaz.github.com/impress.js
Here's an excellent little "framework" for making HTML slide presentations, with animations, transitions and such.
Link: deck.js
I love it!
There is a great list of such presentation templates:
https://github.com/geraldb/slideshow/wiki/More-Slideshow-Projects-in-JavaScript
I found deck.js to be the best compromise between:
simplicity: you write the html and launch it in your browser, no need for a web server
customization possibilities thanks to the themes and clean structure letting you create your own CSS style easily
functionality with the extensions
possibility to print usable handouts
Keydown is a good alternative which uses deck.js and markdown language to write the slides but requires ruby to create the html.
The two options, I can recommend are following
Nivo Slider : You can hard code the images and links
Agile Carousel : Have the option to set it against some server script for rendering output
Use this library to make interactive presentations, stories or ads.
BoardJS