Is there an easy way to use "#-moz-document url-prefix()" to target Firefox in SCSS documents.
I have tried the following, but the parent reference "&" does not work in this context.
#nav li{
display: table-cell;
#-moz-document url-prefix(){
& {
display: inline-block;
}
}
}
I run into little issues like that from time to time. I mainly use this technique to fix IE8. Here's my fix:
First I install: https://github.com/rafaelp/css_browser_selector
This gives me browser and rendering classes for each browser:
<html class="gecko firefox firefox26 mac">
Then in my SCSS, I can do this:
.foo{
display: block;
.firefox & {
display; none;
}
}
This example hides .foo in Firefox. Using a & after the selector looks back up the tree. Isn't SASS awesome?!?!?
Alternatively, install the script and create a separate firefox.scss and just start it like so:
.firefox {
// Do stuff here
}
As a rule, feature-detection using something like Modernizr is easier than playing to specific browsers, but sometimes you need to address various browser issues.
Related
SCSS variables don't seem to work when used in a container query. For example this code works just fine:
.parent {
container-type: inline-size;
background: yellow;
}
#container (max-width: 800px) {
.child {
background:green;
}
}
See pen: https://codepen.io/pwkip/pen/jOprKya
But when I try to use a sass-variable to define the breakpoint, it fails.
$width: 800px;
.parent {
container-type: inline-size;
background: yellow;
}
#container (max-width: $width) {
.child {
background:green;
}
}
See pen: https://codepen.io/pwkip/pen/BaPzVZW
What's the problem here? Any workaround?
I cannot find the definitive sass lang entry, but hash and curly brace is often used in #media queries.
#container (max-width: #{$width}) {
.child {
background:green;
}
}
In Brave it works in that codepen; and so do the following:
#container (max-width: ${width} ) {
As "A Boston" already pointed out the issue seems to be that you don't use the hash syntax like in his first example.
I use https://www.sassmeister.com/ quite often to check what it compiles to.
In your Codepen you forgot to add a semicolon after
$width: 800px;
^
According to: https://developer.mozilla.org/en-US/docs/Web/CSS/#container
#container queries are not supported for Firefox yet. Only Firefox Nightly supports it.
I've tested it in Chrome and it worked with the tweaks. Make sure your browser version is supported. My current Safari version did not work either (due to the version mismatch).
I am thinking maybe editing the prefs.js file? See post here for why. Thanks.
I found a solution. It is not the same as Tab Mix and lacks a whole bunch of usefulness, but it does put the tabs on multiple rows.
First, locate your profile directory (see e.g. Mozilla Support), mine is at
~/.mozilla/firefox/xxxxxxxx.default
(where xxxxxxxx is some random characters), on a typical Linux system.
If it does not exist yet, create a subfolder chrome and within that a file userChrome.css (I think the capitalization of the filename does matter, but I did not test that):
~/.mozilla/firefox/xxxxxxxx.default/chrome/userChrome.css
In userChrome.css, add the following code, which I got from this source:
.tabbrowser-tab {
flex-grow:1;
min-width:150px;
}
.tabbrowser-tab,.tab-background {
height:29px;
}
.tab-stack {
width: 100%;
}
.tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
}
.tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: visible;
display: block;
}
.tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-button{
display: none;
}
After saving, you need to restart Firefox.
Bonus: another nice feature that Tab Mix brought, is the placement of a close button on each separate tab. This can be done by adding another piece of code to the same file (from this source)
.tab-close-button:not([pinned="true"]) {
display: -moz-box !important;
}
My content in slick is not loading properly. However, if I click or change the window size of the browser it works fine. How can I fix the same?
I have added the below CSS but still not working.
.slider-container {
overflow: hidden;
}
.slick-slide: nth-of-child(n+1) {
display: none;
}
.slick-initialized,
.slick-slide:first-child {
display: block;
}
The issue is fixed since the tags were not closed properly.
I was wondering if there is way to have conditional statements in SASS for Internet explorer
FOr e.g. lets say this is what I am looking for:
.container {
background-color: black
}
if ie10 {
.container {
background-color: yellow;
}
}
I found a few hacks that work fine like for e.g.
#media screen\0 {
.container {
background-color: yellow;
}
}
This one works fine but it is a HACK!! And I want to avoid it because who knows when IE fixes this issue and then I would have to re-write my whole code.
Here is one more hack that works
.container {
background-color: black;
background-color: yellow\0/
}
So in this case the second statement is read by IE but not by chrome and Mozilla or Safari so this also does the trick but again, this is also a HACK!!
I dont want to use any kind of hacks in to my project because they dont have a certain life-time.
So is there anyone who has figured out a way to apply IE conditional SASS without using hacks but using something official.
I would really appreciate the help.
You could just import an ie partial (ie10.scss)
base SCSS
.ie10 {
#import "ie10";
}
HTML
<!--[if IE 10]> <html class="ie10"> <![endif]-->
For a while now I've been running into a problem with a large site I'm working on.
The main problem is that our site is offered in two languages: English and Chinese.
The Chinese site is also offered from a different domain: domain.com and domain.com.cn
This brings some issues with it in all our CSS work, mainly fonts and another thing is the domains, since images are offered from our CDN we have to put absolute links into our css, but this also means we have to change it for our Chinese site
body.en .title { background: url(http://media.domain.com/title.png); }
body.cn .title { background: url(http://media.domain.com.cn/title.png); }
The same goes for fonts, the fonts we use for our English version don't support Chinese characters so we use a different font for Chinese characters
body.en .title { font-family: "Our English font" }
body.cn .title { font-family: "Our Chinese font" }
I'm now wondering if SASS could help with this, at the moment I just have a different file (_cn.scss) that changes all links and fonts, specifically for the Chinese version.
But let's say I have this mixin to output some css for fonts:
#mixin font-english($font-size: 16px, $font-weight: 300, $line-height: 22px) {
font-family: "English font";
font-size: $font-size;
font-weight: $font-weight;
line-height: $line-height;
}
body.en .title { #include font-english(14px, 700, 18px); }
Would there be a way to make it automaticly output the Chinese font as well? Right now I have to do this all manually, the same goes for the urls, could I write a mixin that when I use it like
body.en .title { #include background(image.png); }
it outputs both
body.en .title { #include background(http://media.domain.com/image.png); }
and
body.cn .title { #include background(http://media.domain.com.cn/image.png); }
I know this probably isn't possible, but I'm just looking for a better solution, right now I have to go through all the css again and change urls and fonts to the Chinese version.
If you're able to use compass, this is actually pretty easy with their url helpers.
I think what you'd need to do is setup two config groups in config.rb, one for the english version and one for the chinese version.
You can set things like the image url, and generated image url in the config. Images should then be reference not as #include background(foo.png) but as background: image-url('foo.png'). When you run your compass task, for the english version of the site, you'd get the urls you specify for english images (what an "english image" is, I have no idea :))
Fonts are slightly different since you're probably working with completely different files. Two approaches you could take:
1) use compass's font-url helper to reference the fonts, similar to the way you would use the image-url helper. The challenge here is that you would presumably need to name the font the same thing because it'd be referenced as src: font-url('font.woff');. This might not be exactly what your'e looking for
2) Use a different SASS file for Chinese fonts. With SASS's partials, this shouldn't be too much of an issue.
You could basically have all styles as they are, call them through english_styles.scss, and reference _english-fonts where you've specified the fonts you want. You'd do the same for the Chinese fonts.
Then, when you run Compass, you'd get two different stylesheets with all sorts of correct url goodness.
edit for body class approach
I think you'd want to use the "parent selector" (not sure if that's what it's called...) so your mixin for images might be something like this:
#mixin imageOutput($image) {
.en & {
background: url('http://media.domain.com/#{$image}');
}
.cn & {
background: url('http://media.domain.com.cn/#{$image}');
}
}
.class {
#include imageOutput('file.png');
}
compiles to:
.en .class {
background: url("http://media.domain.com/file.png");
}
.cn .class {
background: url("http://media.domain.com.cn/file.png");
}
Fonts would be similar:
#mixin fontOutput($enFont, $cnFont) {
.en & {
font-family: $enFont;
}
.cn & {
font-family: $cnFont;
}
}
.item {
#include fontOutput('comic sans ms', 'china sans ms');
}
compiles to:
.en .item {
font-family: "comic sans ms";
}
.cn .item {
font-family: "china sans ms";
}
More information on parent selectors is available here: http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand