I would like to use display: grid; in my Angular project. According to https://caniuse.com/#feat=css-grid it seems that IE 11 only partially supports it by using -ms-. prefix.
Would it be enough that I install autoprefixer from npm and let it do the magic, or should I just use flexbox instead with the flex-layout package?
It is a very safe option to use autoprefixer and 95% of the scenarios will work. Still test well however, because for the other 5% it might be needed to write some specific CSS. But in general, like I said, you will save a lot of time with it and you will find out that you can easily use grid in IE11 because of this.
An example is "gap". IE11, has no alternative for this so autoprefixer will not save you from that one.
Related
Are there any tools out there that can process a CSS file, inserting -webkit equivalents for styles that aren't 100% supported across the board?
I'm using calc() in my CSS which isn't supported across all browsers. Instead I have to use -webkit-calc() for safari etc.
I'd like a tool that will insert -webkit into the CSS for styles that aren't supported 100% across the board, or to be able to specify the target browsers/versions and have the tool work out whether it needs to be inserted or not. Presumably the tool would have to know what styles were supported in which version of which browsers.
You're looking for -prefix-free.
Are you looking for http://lesscss.org/?
The dynamic stylesheet language.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).
[EDIT]
After answering, i found this website http://prefixr.com/index.php where they use a script to reformat css declarations. Maybe you could study this one.
Does Dojo have any work around to support CSS3
Gradient
Box shadow
Rounded Corner
cross browser support. if not what you guys will suggest with an app build on Dojo to acheive the above.
It does for most browsers except IE (AFAIK), using the claro theme makes it easy as it's built on top of the lesscss framework and mixins are provided to make gradiends, box-shadows and Rounded corners... See http://download.dojotoolkit.org/release-1.8.3/dojo-release-1.8.3/dijit/themes/themeTester.html?theme=claro to check what it looks like in the different browsers you target...
You can easily extend those lesscss mixins to add shims for IE with whatever tricks you need (PIE for example. See http://css3pie.com/)
To get you started quickly, have a look at these files :
dijit/themes/claro/variables.less : that's where you put your theme's custom variables (colors, etc.)
dijit/themes/claro/compile.js : that's the script you launch to recompile your theme after you made modifications to your .less files. This requires you install nodejs. It's documented in the README file in the same directory.
Of course, it's better not to touch any of the claro theme's files directly as they may be overriden if you update dojo, but the compile.js script is a good starting point for creating your own theme-building script based on your own needs and structure.
Ok, so Less.js has come along, and it seems that my dreams of creating a CSS framework (especially a 'grid' system), with an 'abstracted' CSS language might be about to come true.
That is, 960 and Blueprint are great and all... but it so irked me to put style information in HTML markup, such as:
class="article grid_4 pull_2"
or whatever the syntax was :)
So, now it seems that we can do it this way:
.article {
.grid_container();
.grid_four();
.pull_two();
.last();
}
Weeeeeee!
So, I'm about to get stuck into developing this for myself -- but I'm sure there are some brainiacs out there that have already done it -- so before I get into any heavy lifting...?
Any leads?
Kindly
Daryl.
This is the CSS framework you're looking for - http://semantic.gs/
The Semantic Grid System - Page layout for tomorrow.
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any ugly .grid_x classes in your markup. Oh, and did we mention it's responsive?
Brought to you by LESS.js and the creator of 1KB Grid.
I checked out less , it was a push between that and the new sass (scss) syntax, but what made me choose sass is that it has a way to turn css into scss code.
The round trip was something I definitely wanted. Once that happened, then Compass presented itself. I was going to try using something to code everything in python, but it makes perfect sense to me to preprocess the css, especially since I'd like to use HTML5, and if the spec changes, then I can tweak the generation.
BTW folks, I've started that framework I was talking about.
http://github.com/DarylAntony/lesser
I'm having fun with it.
Is there any tool which can automatically convert shorthand css to longhand? I need this cause I want to use SmartSprites which does not work well with shorthand.
And prefably also a tool which does the reverse, so after the sprite computation i can minify the css as much as possible...
Also any other solutions for automatic spiriting is welcome, basically im looking for some command line tools which can be integrated into the build process so that the developers still develop on the raw css code.
You can use Dragonfly on Opera. Dragonfly is like Firebug on Firefox and Chrome but developed by Opera. There is a function in Dragonfly which let you alter the shorthand and vica versa. Check opera.com/dragonfly/documentation/
For the reverse, you can use a CSS optimiser like csstidy. I doubt it will convert shorthands to non-shorthands though.
Why not forbid the use of shorthands by developers and use csstidy in the build process?
If you don't like that idea, you could write a small script to do the shorthand conversion, which is significantly easier than the other way around. It basically comes down to string replacement.
Is it worth adapting to a css framework or just use the css we all know?
How to get started with Blueprint [CSS Framework]?
Any other css frameworks which is really worth a try?
If not Blueprint, I recommend at least using a CSS reset file, which standardizes many default browser settings that differ across browsers; such as the Yahoo "YUI Reset CSS".
Otherwise, if I were you I guess I would just start in the Blueprint wiki and look through the tutorials. Then make something of your own!
To determine if it's best to use a css framework or not, you need to look at your overall web design and see how easily you can break it down into elements. If you find yourself using a lot of container divs and floating them all left or right, a CSS framework may be a good idea.
Another reason it may be beneficial to use Blueprint is that you can decrease the amount of CSS you need. Rather than creating a div id for every column or container and putting in a width and height in your CSS file, you can just use the framework and quickly assign a class.
I built Intronis.com using the Blueprint CSS framework. It worked well because it is a very clean site with common elements and it's based on a grid.
I'd use a CSS framework on a case by case basis. Let the design dictate if you use it or not. For some sites it's a good fit. For others it's not.
To get started, download it here, then just unzip the file and put it in a local test environment to try it out.
Also, make sure you take a look at the IE6 CSS included with Blueprint and take note of the .clearfix class that you can use when working with container divs and floating objects.
I've just written a brief tutorial on how to get started with Blueprint CSS, you might like it. http://flowdev.tumblr.com/post/1187039740/blueprint-css-to-grid-or-not-to-grid