How to target firefox or any other browser in SCSS? - css

The glyphicon is misaligned and is not behaving properly in Firefox whereas it looks perfect in Chrome and Safari. To solve this, I am trying to write a rule which would just apply if it is a Mozilla's browser.
Is there any way to detect a browser in SCSS by using directives like #if. Something like following:
#if $browser === mozilla {
//apply this CSS
.pull-right.glyphicon.glyphicon-chevron-right {
top: -13px;
line-height: 0.5 !important;
}
Do we have any simple way to detect? I tried using the #moz-document url-prefix() which isn't working in SCSS.
A similar question was asked here but there is no correct solution to the problem.
Any help or guidance is greatly appreciated. Thank you.

Managed to get scss to compile when the prefix rule was used a mixin, but not otherwise:
#mixin firefox-only {
#at-root {
#-moz-document url-prefix() {
& {
#content;
}
}
}
}
then
#include firefox-only {
prop: val;
}

I used the following to fix an issue I had with text-indent on Firefox being applied for double the width.
select {
text-indent: calc(50% - 16px);
#supports (-moz-appearance:none) {
text-indent: calc(25% - 8px);
}
}

Related

Using webkit on SCSS

I'm trying to change the color of a scrollbar-thumb in my SCSS file.
I tried using the scrollbar-color, but only using webkit is working.
// NOT WORK
.demo {
scrollbar-thumb: #0f0f0f;
}
// WORK
.demo{
//....
&::-webkit-scrollbar-thumb {
background-color: #0f0f0f;
}
}
I understood that webkit is working only with some browsers, so I want to make it as general as possible, so whatever browser the user uses, it'll show the new color.
Thanks all

Is #supports available in LESS / Edge specific CSS rules written in LESS

Edge doesn't support styling above this section (no support for clip-path current) so to fix the styling I am trying to write Edge specific CSS.
I'm using LESS and I get an error when I try to to compile because it thinks that #supports is a LESS function. LESS will however recognise that #media is the CSS method.
My question is, how do I make the following code work with LESS or is there a better way to write Edge only CSS
#supports (-ms-ime-align:auto) {
.section {
padding-top: 0px !important;
}
}
UPDATE:
The issue appears to be with Visual Studios LESS compiler not recognising #supports
You are hopefully long-done with this project, but you can force LESS to not pre-process with the tilde and single quotes:
#supports ~'(-ms-ime-align:auto)' {
.section {
padding-top: 0px !important;
}
}
This renders to css as intended using the current Visual Studio 2019 - Web Compiler
I think less, at least for the version I am working on, cannot render #support tag inside a hierarchy.
So I struggled to make something like this work:
#header {
// some CSS...
#supports (-webkit-mask-image: url()) or (mask-image: url()) {
i {
-webkit-mask-size: cover;
mask-size: cover;
}
}
}
And finally, I make it by moving the whole hierarchy inside #support tag like this. A bit of repetition, yet it will do.
#header {
// some CSS...
}
#supports (-webkit-mask-image: url()) or (mask-image: url()) {
#header {
i {
-webkit-mask-size: cover;
mask-size: cover;
}
}
}

Getting errors in the CSS linter when using media queries

When I put the code below through the CSS Linter I get six errors. Are these bugs in the linter or the CSS? I can't see anything wrong with the CSS. I can't seem to turn off or ignore the errors either regardless of the settings.
#media ( max-width: 320px ) {
.test {
padding: 20px;
}
}
I only had to remove the spaces for it to pass:
#media (max-width:320px) {
.test {
padding: 20px;
}
}
Your code is valid it's just that css link is being picky about the formatting.
If you change it to the following it's quite happy with it:
#media(max-width:320px){.test{padding:20px;}}
I'd recommend using this site to validate your css:
http://jigsaw.w3.org/css-validator/

How can we know if any website is using Sass and Compass?

How can we know if any website is using Sass and Compass for CSS?
That's a though one, but I would take a look at the CSS files, IF the developers forgot about changing the output, you'll be able to spot the file names and line numbers of the source files.
If not, look for uncommon patterns in the CSS output, for instance SASS makes nesting very easy to do, so a selector could look like this in the CSS (you would never hand-write this long selectors)
div#wrapper div#container ul#myId li a { color: blue; }
div#wrapper div#container ul#myId li.sass a { color: red; }
But would be look like this in SASS source file (no repetition, easy to getaway with)
div#wrapper {
div#container {
ul#myId {
li {
a { color: blue; }
&.sass {
a { color: red; }
}
}
}
}
}
Also, look for lengthy class combinations, those come from using the #extend directive, that would look like this:
.button, .button1, .button-submit, .button-add-to-cart, .button-signup, .button-register {
display: inline-block;
}
Another good idea is to look in the source of CSS3 generated buttons, usually developers only care for Firefox, Safari, Chrome and IE, but a SASS generated output will be REALLY verbose with a lot of vendor prefixes, including ones for Opera.
Good luck!
if the developer forgot to compile for production or minify the .css, than you should still be able to see the automatically inserted comments that point back to the original source, like:
/* line 22, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
.selector {
bla: 123;
}
or
/* line 5, sass/large/_common.scss */
.selector {
bla: 123;
}

How to apply background-color: css only in a webkit browser

Pretty simple, I have this tag
background: #4d4d4d;
and I need it only to work in WebKit browsers. Anyone know how to do this? Feel free to use any combination of PHP/JavaScript/jQuery/CSS
[if Webkit]body
{
background: #4d4d4d;
}
Source: http://www.conditional-css.com/
Or as many pointed out jQuery.
Or with
#media screen and (-webkit-min-device-pixel-ratio:0) {
body
{
background: #4d4d4d
}
}
With jQuery:
$(function() {
if ($.browser.webkit) {
$("body").css("background", "#4d4d4d");
}
});
It'll work with current versions of jQuery, but it should be noted that jQuery.browser may be moved to a plugin in a future release of jQuery.
jQuery includes a method just for this.
http://api.jquery.com/jQuery.browser/
$.browser.webkit; //returns true

Resources