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 9 months ago.
Improve this question
I am new to web development. I was wondering if I should really write different CSS code for different browsers. If I should, any tips for writing and testing my website in different browsers? Also, which browsers should I write different CSS code for? Thanks!
If you use autoprefixer then it will do all the different browser stuff for you: https://css-tricks.com/autoprefixer/
For testing in different browsers you could use something like BrowserStack
I suggest you write CSS code that targets the largest audience or market. Currently, the most used browser is Google Chrome. If you're more comfortable with another browser such as IE or Safari you can choose to write browser-specific CSS code.
Be sure to check the browser compatibility of the CSS properties you're using on the MDN Web Docs. Cheers!
Related
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 3 years ago.
Improve this question
There are so many ways to use style inside react js that it confuses me.
for example :
Normal CSS
CSS in JS
Styled Components
Sass & SCSS
Are the above methods influencing website load speed?
What is the difference between these methods?
Try using SCSS when ever you can. It helps to organize your stylings and will be processed to css any way. So there is literally no mentionable downside.
For simple styling i would recommend normal css classes (in .scss files).
For complex animation or styling logic use javascript in conjuction with existing animation libraries like framer-motion. That way you have more control over what is happening and also more possibilities to make your site outstanding and unique.
Performance is all the same, all of them are translated into plain CSS when you run : npm run build.
CSS has its benefits, because of designer-friendly but you may get some problems by accidentally making 2 classes with the same name(this is when you have CSS split into many files) if this happens it will make debugging a nightmare (been there myself).
Sass has the same problem as css, but it's a way more cooler css :)
Styled-component, CSS in js, may fit a little better on react component-based world, because for every "class" that you style a UNIQE className is generated + it gives you more power by having props/state modifying the styles of classes, not like others where for a backgroundColor change you will need 2 classes.
There are a lot of ways to do this, best-comparing article that it served me well in my beginning is in here: https://www.sitepoint.com/react-components-styling-options/
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 have completed html and css and now i want to pass another step.So should I learn responsive design with media queries first or learning Less for CSS then I pass for media queries?
Less is just a smarter way of generating CSS. I think you should learn everything CSS has to offer before jumping to a language that just generates CSS. I will give you two good reasons for that:
You can do anything with CSS that you could do with LESS. You can't do responsive design with Less if you don't know media queries.
Knowing what is happening under the hood will ease the learning of a preprocessor language (Less, Sass, etc) later, as you will have a better understanding of the bigger picture.
I'd say that media queries are easy enough to pick up alongside of a library like SASS/LESS. Responsive design is more about the concept of giving your elements dynamic values than static ones. But, don't let learning one inhibit you from learning the other. If you already have a solid understanding of css, jump in and do both at the same time. It's not like you can't go back and check out what you've written in plain css after it has been compiled.
cheers mate!
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
This data from caniuse http://caniuse.com/#feat=calc suggests that practically all browsers now support calc in CSS. Are there any reasons to still avoid using calc for consumer websites? Have any major websites started using calc?
The official level is Candidate Recommendation for W3C and are descripted in draft document CSS Values and Units Module Level 3
Candidate Recomendation is not like Approved but is very near, so (i think) it 'a choice deeply comforted by the state of the documentation of W3C
IE seems to be the problem as usual but as far as I know, the calc element is fairly safe to use, depending on the units you are using (c.f. 'Known issues' with vw vh).
About Opera Mini, I thought it was now using the Chrome engine, even on iOS (iOS Safari engine is specified for iOS on caniuse). Would someone have more details about this?
EDIT:
A very interesting post about this on CSS-Tricks by Chris Coyier.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am taking over an application that has buttons with this css:
background-image: -moz-linear-gradient(center top , #049CDB, #0064CD);
it looks beautiful in firefox but looks like a mess in IE, etc
what is the best way to take these clearly firefox specific css and determine the best way to make it look the same on all browsers (just need IE8+)
This tool might be a useful tool for you.
Since this CSS attribute is still a working draft of CSS and has some legacy it will require a lot of markup to be fully supported for your current situation. The -moz- prefix is one such isntance of providing support. All other browsers will required either the standard, -ms-, -webkit-, -webkit-type or -o- prefix as well.
You should look out for other spots in the application you've taken over for code that hasn't been fully tested on other browsers.
LINK
http://www.colorzilla.com/gradient-editor/
This is a matter of opinion but there are tools online that will help you generate css for gradients that works across browsers. http://www.colorzilla.com/gradient-editor/ is an example.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How does the
not(#foo)
selector works to block older browsers and for which browsers does it work in the following tutorial?
http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/
The CSS selector does not block browser, it's just not supported by the browser, i.e. when CSS file is being parsed by browser's built-in parser (which in turn supports certain CSS specification), unknown selectors and rules will be ignored and won't be added into styles of frames in render tree