This question already has an answer here:
Compass filter out -moz vendor prefix
(1 answer)
Closed 6 years ago.
I'm working on an AngularJS project using the AngularJS generator for Yeoman.
I installed Compass as a gem because I couldn't find/figure out an appropriate compass bower package.
Various compass mixins I'm using work fine; expect the linear-gradient one; it seems to only pass-through my content and not modify it with vendor-specific prefixes:
SASS:
#import "compass";
.container {
width: 100%;
height: 100%;
border: .2em solid #fff;
#include border-radius(.5em);
#include background-image(linear-gradient(top, #000, #fff));
}
CSS:
.container {
width: 100%;
height: 100%;
border: .2em solid #fff;
-o-border-radius: 0.5em;
border-radius: 0.5em;
background-image: linear-gradient(top, #000000, #ffffff);
}
As you can see, linear-gradient is being passed-through without any vendor prefixes (but border radius is getting an Opera one) and thus won't work in Chrome. I've checked and rechecked and this is exactly how the Compass documentation explains it.
What am I doing wrong?
bootstrap-sass-official#3.1.1+2
compass (0.12.6, 0.12.4, 0.12.3)
compass-core (1.0.0.alpha.19)
compass-import-once (1.0.4)
compass-normalize (1.5)
Thanks
I figured it out; I saw a a lot of similar problems on here and initially none of them addressed "my" issue.
It's apparently because autoprefixer (which is bundled/enabled by default with the angular generator) was stripping out prefixes.
The default setting for it in gruntfile.js is "last 1 version". This breaks it for Safari and Chrome (and as far as I know, I'm running the latest).
Setting it to "last 2 versions" fixed it for me.
More at: https://github.com/ai/autoprefixer#browsers
Related
I defined these css styles :
.scrollbar {
float: left;
background: #fff;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
At runtime it runs only on Google Chrome. When I run the app through Mozilla Firefox then the app does not render properly the desired rendering. So how to make the styles applied for all browsers ?
You cannot implement this CSS across all browsers. -webkit is a vendor prefix for browsers that support either the WebKit or Blink browser engine. Right now support is inconsistent even within browsers that support this prefix:
MDN Documentation for ::-webkit-scrollbar
CanIUse Documentation for ::-webkit-scrollbar
If you absolutely need a fully customized scrollbar implementation that is fully cross-browser compatible you will very likely need to research a JavaScript based solution.
The good news is that since this is a vendor prefix, browsers that do not support it will simply ignore the declarations and load the scrollbar in whatever fashion that browser normally displays its scrolling mechanism.
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>
I work on a PC so I hadn't realized I was having this problem. Basically, the rounded corners of my container are not displaying in safari, which is strange because I believe the code I used is compatible with Safari. Any input on this would be greatly appreciated.
Here's my container code:
.container {
clear: both;
margin: 20px auto;
width: 940px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
/* overflow-x: hidden; */
*zoom: 1;
}
And then my website is basically wrapped in it:
<div class="container">
WEBSITE
</div>
If you have safari, you can view the issue here.
Your problem is that you've got all the prefixed versions of border-radius, but you haven't got the standard un-prefixed version.
You need to add border-radius: 10px;
Yes, Safari is a Webkit browser, so you might think that -webkit-border-radius should work, but the prefixed version is only supposed to exist while the style is experimental. Once it's become a standard, the browsers are supposed to drop support for the prefixed version and only support the standard version.
border-radius became a standard a long time ago, so all browsers should now support the standard version without a prefix. Some browsers do still support their prefix, but they could drop support in any version.
The same applies to box-shadow, and to every other CSS style -- if you are declaring prefixes, you should also always declare the un-prefixed standard version too.
Hope that helps.
Consider the answer provided by #Spudley ,in case if it doesn't solve the problem
Few things you can do:
1)Check your Safari Version
As #Adrift pointed out in the comments ,it might be a compatibility problem.
2)A non-visible character might be present in your css code
This problem occurs often thus making the programmers struggling for hours to find the problem.Try writing the code into another file or use some good editor which shows the hidden characters.
I'm developing a Grails app and I need to modify some elements' style. I tried to add a css class to the main.css file but it is not working.
In /web-app/css/main.css:
.artistItem {
background-color: #444;
border: 1px solid #fff;
padding: 10px;
color: #ccc;
width: 200px;
}
In the .gsp:
<div class="artistItem">Some text</div>
But the div remains unchanged. Am I missing something?
Thanks!
This isn't a direct answer
Playing around with CSS in grails can be a little frustrating for someone that hasn't had a lot of exposure to CSS in general (I'm speaking form experience). Grails provides a nice clean CSS for a good starting point but trying to build on it without understanding CSS can cause some pain.
I would recommend looking at a couple tools like FireBug for firefox or Chrome's built in developer tools, IE also has a nice developer tool. These tools allow you to see how the browser is rendering your page and what CSS elements are being used or not used. They also expose the javascript console and several other nice debugging tools. I believe this are essential tools to help understand what the browser is doing.
I hope this helps!
Try:
.artistItem {
background-color: #444 !important;
border: 1px solid #fff !important;
padding: 10px !important;
color: #ccc !important;
width: 200px !important;
}
If that works, then you know there is another css stylesheet overriding it. If not the css is not being included properly.
For example in the following from sass. Is the = just a shorthand for #mixin? I can't seem to find any info for this on google
=multi-line-button($base-color)
+background-clip('padding-box')
border-width: 1px
+border-radius(6px)
border-style: solid
color: white
display: block
margin: 0.2em auto
padding: 12px 15px
text-align: center
text-decoration: none
yes, this is the way to define mixins in Sass
dunno if this article will help at all
EDIT:
The following are identical
#mixin red-text
color: #ff0000
=red-text
color: #ff0000
Just add +red-text to your selectors
"#mixin foobar" is the newer SCSS syntax (more CSS-like) and "=foobar" is the older SASS syntax (more HAML-like). I'm fairly new to SASS and started with SCSS, but both are supported (probably not in the same stylesheet) and both will continue to be supported.