CSS for Chrome, Android and IOS

Ionic Framework ionic-v3
1

What browser targets do I need to include in css within Ionic?

Sorry - but this seems an easy question to answer - i.e. just code for all possible formats - but before I go through all my css and make the adjustments I just thought I check what the ideal solution is.

For example the following gradient generator produces:

/* IE10+ */
background-image: -ms-linear-gradient(left, #cfe7fa 0%, #6393c1 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #cfe7fa 0%, #6393c1 100%);

/* Opera */
background-image: -o-linear-gradient(left, #cfe7fa 0%, #6393c1 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #cfe7fa), color-stop(100, #6393c1));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #cfe7fa 0%, #6393c1 100%);

/* W3C Markup */
background-image: linear-gradient(to right, #cfe7fa 0%, #6393c1 100%);

I remember using an online css checker before - you enter the css and it would create all the possible variations. Spent a few hours looking for it but can’t find it.

2

Target all of them I would say, if I undertand correctly, if a style isn’t supported then it just has no effect. I used to include http://bourbon.io/ in my app to handle browser specific things. But with their last version they deprecated a lot of features because most of them were now standardised, therefore I also removed it.

In my app I’ve got only a few specific css attributes, like line linear-gradient too, so I created a mixin I could use accross my all app, so here’s your christmas gift :wink:

@mixin my-linear-gradient($direction, $color-left, $color-right) {
     background: $color-right;
     background: -webkit-linear-gradient($direction, $color-left, $color-right);
     background: -moz-linear-gradient($direction, $color-left, $color-right);
     background: -o-linear-gradient($direction, $color-left, $color-right);
     background: linear-gradient($direction, $color-left, $color-right);
 }

to use it for example

 .something {
    @include my-linear-gradient(to right, #cfe7fa, #6393c1);
}
3

Thanks @reedrichards the maxin is a good idea - I tend to use the Sass as plan old css.

1 Like
4

uigradients

See: https://uigradients.com and https://github.com/subinsebastian/uigradients-scss

5

It begins with a mixin, then a variable and soon you could only write sass :wink: