On developing frontend-stuff in scss and html5 I have some routines that I rely on like display:inline-block, rgba, css-gradients and so on.
Now dependent on which project I have, browser demands change. I sometimes need to deliver something workable for IE7 and sometimes IE10 is alright too.
Of course I can (and do) real browser checks to check issues, but I thought having a routine upfrontal check wouldn't hurt. So I could run a search within my scss-files to check for the pattern "rgba" and replace it with something appropriate. But that doesn't sound neither very reliable nor modern to me.
Isn't there a way to generate a special set of pattern-fixes for each browser > run it > highlight it to me (or even better already fix it)
Would grunt/gulp be the topic I need to investigate therefore further?
Thanks
As deolectrix said you could look into compass, there is also bourbon, and less. Using grunt/gulp would be highly recommended. For many reasons like concating/minifying your code, or if you write JS you can use something like babel to write ES6 JavaScript.
For cross-browser css autoprefixer would probably help you out. For errors/warnings about troublesome css look into csslint. Hope that helps! It's just a starting point, enjoy diving in.
Related
Basically, I have finished the CSS for a site at work, but I've never used a prefixer before.
Can I just stick the whole lot (about 900 lines) through an online prefixer E.G. https://autoprefixer.github.io/ ?
Or will this cause issues?
Would I be better using something built into VS Code or using some sort of processor?
Thanks.
P.S. I did look for another question/answer similar to this, but couldn't find a definitive answer.
If you are working on chrome and have compleated your project that is totally fine. You can use the auto prefixer without any hesitation. You just need to copy and paste the code then you need to copy the auto prefixed code and paste in your code editor. In rare cases, some of your properties may not work in the other browsers (as I said very rare properties) but that will not affect your existing code I can guarantee that.
Just go through this to know about the existing and deprecated CSS properties.
Can I Use
At first glance, React Native appears to have CSS support. But users quickly learn that it's not even close. There is no css parsing, no selectors, and no 'cascading style'. Everything is basically POJOs.
I'm on a team building a React Native app and every new developer has been confused by this. The styling, IMO, needs major improvement. I would like it to be closer to the web, supporting such things as:
.css file parsing
class and element selectors. I want <View className="container" />
style resolution like the web
maybe pseudoselectors
There isn't anything like this on the roadmap. I'm shocked it isn't under discussion. I'm considering tackling this problem, but I want to be sure it's not already underway or something people don't want.
So, I'd like to know:
1) are there any plans to implement something like this and 2) is this desirable?
I'm unsure if SO is the forum for this, but it was recommended in the RN readme. If it's inappropriate for SO, please point me to a better place rather than just flagging it as off topic or whatever.
By the way, I've already started work on this. My plan is to use WebKit for CSS parsing and resolution. Then I'll have to modify the RN code to add className and tag name support, as well as integrate with WebKit for applying the styles at render time. The end goal is to get this integrated into the framework, but at first I'd prefer to develop as a separate library, potentially (hopefully not) having to fork or patch RN core.
I only need a small portion of the massive WebKit code base. If anyone is or knows someone familiar with WebKit, I'd love some help.
For my website, I'm considering using Less.
Can I have some problem of compatibility in browser, problem with JavaScript or other problems? I know that is better than CSS but I don't know if I can have problems.
Although I prefer SASS over LESS (better syntax [loops and control structures] and it has some more capabilities => my opinion), it's generally a good idea to use a CSS-Framework. It safes time and unneccesary work. Just be sure to precompile your styles in Production mode. Don't do it clientside (might cause problems: disabled javascript, performance-issues...). If you precompile the CSS, you don't have to fear any problems, since native CSS gets delivered to the browser.
You can take a look at a good comparison here:
https://gist.github.com/820035
from the LESS docs:
As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. [...] if in doubt, lets you fall back to CSS.
The best approach in production is to server-side compile it, while in development you can simply use the client-side javascript compiler:
http://lesscss.org/#-client-side-usage
also note that LESS is not strictly a framework (opposite of what Twitter Bootstrap is) but can easily be paired to one. Bootstrap itself has a LESS-enhanced version as well.
I agree with #Christoph. I prefer SASS too. Also Less or Sass aren't used to browser compatibility. They are used to add functionality to css.
You can look at that article here.
http://nittygrittyjs.com/blog/why-less-is-a-pain-in-the-sass/
I know that there are several very similarly-related questions on this website, however after reviewing the play, I believe this question is unique in its own right. If someone can find and provide evidence of an exact dupe of my question, I will withdraw it myself (so please just don't downvote this!).
I am a Java developer, not a web developer. But, as is the case in so many families where there is one person who becomes the designated family "computer guy", my Java development skills have been mistaken for web development skills, and I somehow got roped into building a website for my parents to help them sell their house.
So, like any web development newbie, I wrote the HTML/CSS myself (by hand, sans editor like DW or Expression, etc.) and tested it against FireFox 3.x. All looked great, and we deployed/launched.
Now we're getting negative feedback from everyone and their dog stating that the site isn't rendering properly in other browsers, browser versions, or on FireFox installations running on different operating systems. Similarly, the site is apparently a total mess when being viewed through a smart phone or tablet device.
Now I could dive in and write a whole bunch of messy, nasty, painstakingly-tedious edits to my CSS rules, that basically say: do X when browser is Y, etc. But I am hoping that out there is a tool that can put all my fears to rest.
What I'm looking for is a tool that could take my valid CSS files, and use them to generate CSS rules that will be compatible with a high percentage of all common browsers/versions.
Alternatively, if I have to re-write my CSS from scratch, it would be nice to have a tool that allows me to write/design once, deploy many, so that I only have to focus on the design of a single CSS file, but the code that gets generated is multi-browser compatible.
It sounds like DreamWeaver kind of does this, but you have to choose from one of 16 pre-existing templates.
My wife is a graphic designer, and made the website pretty sweet (not cookie cutter). It was a nightmare trying to figure out what CSS rules to use to implement her design. So any tool that forces you to choose between templates is not an option.
Is there any hope for me, or do I banish myself from my family in shame right now?
css is a mess, no way to automatically doing it right. saying that I would say there are tools that would walk with you the proper way.
1. use the meta tag:
http-equiv="X-UA-Compatible" content="IE=8" (encpsulate as a meta tag - SO won't display if I wrote it as a valid tag)
to force IE to render with it's most modern engine, that would solve some problems.
2.begin your css with normalize.css - that would eliminate some of the cross browser problems - because it resets your css (better and more modern the reset.css)
I'll second the GWT if you come from the java dev world. although It's a framework to learn with it's own quirks. another possible web framework is Grails - a nice java/groovy port of the mighty Ror.
Less or Scss won't automatically solve your basic problem - which is browser compatibily - but are a better and simpler way to write css
remember that most css3 properties aren't support equally in all browsers (and in IE almost not supported) - use them only with graceful downgrade option with supported js or css -when Modernizr js library can give you pretty good property support detection for various browsers
don't go dreamweaver - it produces terrible code
use csslint to check for valid css and common css pitfalls
If you must use cutting edge web rendering with html5+css3 elements you should look into chrome frame -that would enable older browser better support of your site - although I believe this may be an overkill for a simple sell-my-house kind of site.
use a css framework to prototype- it would give you better css, good basics and resets and good boilerplate - maybe bootstrap or something similiar (didn't try most of them but the internet is crowded with those.
good luck
Check out modernizr. http://www.modernizr.com/docs/
You want to get into the position of checking for features and not browsers.
Here's an excellent site to check your site with alternative browsers:
http://www.browserstack.com/
Less (http://lesscss.org/) will help you with a lot of CSS3 functions.
However, good CSS code simply works on all browsers. There are some CSS concepts that must always be avoided as much as possible (absolute positioning, excessive floats, using the wrong elements for a task, etc) and your code will work better.
In the many years I have programmed I only needed browser-specific code in the first two years. Then I grew up and learned which CSS code not to use and when it was possible to use them. It has been my experience that properly written CSS code works on all browsers, and if it doesn't it will at least get the basic concepts right (eg. a few pixels may be wrong or some effects, but the site still works well).
Several things come to mind that may help your case:
Forget about IE6, that one will give you trouble no matter how much effort you put into the site.
Make sure you have a good doctype (html5 or xhtml would be good).
Try out html5 reset, it tries to make sure all browsers behave the same.
The aforementioned reset also includes modernizr to bring older browsers up to speed
Finally: accept (some even say "embrace") that different browsers render things slightly different. Getting every pixel exactly the same in each browser will be near impossible.
I hate to put this into the world, but it sounds like you need Adobe Muse.
There is no equal to a good developer who will write clean cross browser code, but if you just want to get the site done check out the beta: http://labs.adobe.com/technologies/muse/
What I'm looking for is a tool that could take my valid CSS files, and
use them to generate CSS rules that will be compatible with a high
percentage of all common browsers/versions.
Unfortunately there's no such a tool and you have to debug and test your website for cross-browser compatibility manually. The best way i've found for cross-browser testing it to install and test different versions of browsers in several virtual machines.
You will also find the following helpful:
Modernizr
Google Web Toolkit
It's not really a coding question, but I don't know where to ask it elsewhere.
I'm looking for a tool to clean up unused css selectors.
I know this tool Dust-Me selectors, but I want it to clean it automaticly.
Can anyone help me with this?
Depending on the complexity of your site, I don't think it's a good idea to clean up CSS automatically. I've used those tools myself (DustMe-Selectors mostly) but as soon as it comes to dynamic pages (and sites), all of the tools lack the ability to really find out what is used and what not.
Consider a site using selectors like "item-selected", "item-soldout", "item-bargain", etc. If the site will apply selectors dynamically to e.g. items in a shop, tools may not find those selectors in your markup because they are not used at the moment but maybe used as soon as the shop-configuration changes.
So I'd suggest to go with one (or more) of the tools suggested here and carefully evaluate the suggestions for unused selectors, but rather not use something to clean my code automatically.
There's a windows based utility called CSS Cleaner available here. Obviously the issue is that it has to run through every pages in your project to determine which selectors aren't used. And it can't see into any CSS generated by your code.
Be careful with auto-clean up. If you are not 100% familiar with the site -- don't do it. There may be classes or IDs in your code that are there for JS and not CSS.