I have a little keyframe animation I use occastionally, it looks like so:
#-webkit-keyframes zoom-zoom {
0% {
-webkit-transform: scale(.1);
opacity: 0;
}
70% {
-webkit-transform: scale(1.2);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
}
}
Works fine in a .CSS file but I'm converting this site to use less.js so all my stylesheet are getting rewritten, but this won't process. It throws an error when it gets to 0% saying it's not valid.
Any ideas?
I'm using less.php to compile .less to .css and it handles CSS3 animations properly. You can use the less.php demo to see it for yourself.
I guess this is a bug in the less.js compiler, you may want to consider reporting in on the github bug tracker of less.js. Till you get an official answer there, you can just use less.php for compiling it.
I guess that less was written before people started using these animations, so doesn't nknow what they are.
I use SASS (same thing but better :) ), which parses them fine. Alternatively, maybe less has a newer version where they parse them.
Related
I keep getting this weird error message when compiling. Very hard to debug.
(By the way: opacity in the example is a mixin)
But I'm stuck on
> 59| .red { opacity 0.4 }
expected "indent", got "eos"
I've tried
.red { opacity(0.4) }
.red { opacity(0.4); }
and nothing.
I've also found that you can get this error if you mix spaces and tabs. It's a strange error to get for this issue. Just make sure that you stick with one or the other.
I found this was caused by an erroneous curly brace left behind when conversing css or a mixin
myMixin(var = 1){ <--- nooooooo
color red
etc etc
Problem A
The issue is that for some syntax reasons, stylus doesn't permit mixins alone in a selector
The solution(s)
is to use multi line
.red {
opacity(0.4);
}
add a bogus property (make sure it doesn't affect your styling)
.red { opacity(0.4); zoom:1; }
Problem B
Another issue was with reset styles, being without a new line between them.
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none} ...
The solution
To put each of the style on individual lines:
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
...
Very very weird issues and even weirder solution :P
Hope that this save some of your time (because I've wasted a lot of mine on this :( ).
I just had the same problem. As it turns out, this problem can also be caused if you have two consecutive, adjacent hashes when defining a color:
color #FFF <- good
color ##FFF <- easy to miss, will cause very unhelpful 'eos' message at file end
I had this issue and (after about 30 min) realized it was an extra opening brace that my IDE put in - clearly I should have been watching more carefully! I would suggest looking at all your git (or what have you) changes very carefully and be sure you have no double opening braces:
.class-name-of-greatness {
{
color: blue;
border: gold
}
For all the Vi(m) users: Can also be triggered by
$width--s = 24rem:wq
(last 3 chars)
I made a huge mistake and I'm looking for some help.
After building a site with CSS, mobile-first responsive, with respond.js as a polyfill, after I tested it in IE compatibility mode during developing I realized at the end that there's a big conflict between respond.js and the javascript used by the CMS and the Internet Explorer 8 blocks everything from rendering.
I decided to drop the polyfill entirely and go the SASS way with it, using a MQ mixin.
Right now the problem is that IE8 is seeing the mobile version of the website
(sorry I can't give you a link to it)
I have included conditionizr for < ie9 and I have used css2sass to get my CSS nested a little.
I found a great MQ mixin by Stuart Robson (here) ** that I have not yet started to add it, the question is, do I have any other option than to go and edit everywhere I used mq in the code?
The mixin I think I have to use looks like this ** (adapted it a little to make a better use of it for my problem):
#mixin mq($point, $IE9: true, $query1: min, $query2: width) {
#if $IE9 == true{
#media screen and (#{$query1}-#{$query2}: $point +px) {
#content;
}
.lt-ie9 & {
#content;
}
}
#else {
#media screen and (#{$query1}-#{$query2}: $point +px) {
#content;
}
}
}
I'm not going to debug the JavaScript code to make the polyfill work. I have tried several other scripts (including css3-mediaqueries) but I dropped the idea of help from javascript and I want to go the SASS way.
Given that there's a chunk of almost 6k lines of SASS code, is there any SASS way to help me with adding the mixin somehow so that I end up getting something like this?
#media screen and (min-width: 320px) {
body {
margin: 0;
}
}
.lt-ie9 body {
margin: 0;
}
I learned my lesson, started using BrowserStack and I will only go with that mixin from now on. There's still the problem at hand that has to be fixed..
Thanks in advance.
Regards
I will edit all the MQs to use the new mixin and I also have to learn more SASS and stop asking silly questions about it! :)
Thanks everyone!
Does anyone know what is wrong with this rule?
#media screen and (-webkit-min-device-pixel-ratio:0) {
#nav-main li.c_course div{margin-left:1px !important;}
#nav-main li.c_course div{margin-left:1px !important;| margin-right:0px !important;;}
#nav-main li.c_course div div{margin-left:0px !important;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#nav-main li.c_course div{margin-left:1px !important;}
}
I researched it at media syntax possible combinations. It seems to be valid code (judging by the post even though the 7.3 Recognized media types spec doesn't list the syntax the way the OP does).
Is it supposed to be positioned somewhere else in the .css or what?
Thanks
Using the code:
#media screen and (-webkit-min-device-pixel-ratio:0)
Is a way to target just webkit browsers as it matches a webkit browser with a minimum pixel ratio of zero which in affect is every webkit browser. The issue is that the webkit prefix won't validate against W3C standards as it's vendor specific - it should be used as a last resort and if you don't mind the CSS failing validation.
Here's some info www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio.
It appears the rule should be written as
#media screen and (min-device-aspect-ratio:0){ ... }
Thing is, I don't know if "0" is a valid value. The spec uses a ratio and I don't know what the coder meant by using "0". "0" means nothing anyway---so the statement seems meaningless. www.w3.org/TR/css3-mediaqueries
After running into problems with auto-suggest stripping off leading zeroes, I took the plunge and updated my dev copy of CF to 9.0.1, including the cumulative hot-fix. Now I see a new problem.
Every one of my existing cfgrids is now displaying incorrectly in Firefox 6.0.2. The .x-panel, .x-panel-bwrap, .x-panel-body classes have a computed width of 12px, and are basically unviewable. I find that if I insert a css rule on those classes like so:
.x-panel, .x-panel-bwrap, .x-panel-body { width: 100% !important; }
the grids are again viewable. I did clear the browser cache to make sure it was importing the correct files.
IE8 and Chrome both seem to be unaffected.
OK, Peter, why not? My workaround, as posted in my question, is to add the following css rule:
.x-panel, .x-panel-bwrap, .x-panel-body { width: 100% !important; }
I am getting a strange error in my log file, and I can't find where in my site it is coming from: I am using log4net to log the errors, and the site is MVC3
The error is "A potentially dangerous Request.Path value was detected from the client":
Now, I know this normally happens if html chars etc are posted back to the form.
The strange thing is, I have tried all forms on the site, and I can't get it to happen.
I am logging the Request.Path value in the file, and it gives me:
/assets/img/footer_arrows.gif) ,
url(http:/xxmysite.com/assets/img/footer_bg.png) ,
url(http:/xxmysite.com/assets/img/page_bg.gif
Now the above is in my CSS file (within background image, using CSS3 multiple background images). Also, the items in the url(xx part are not fully qualified in my file.
Also, the first line (footer_arrows.gif) is in a URL(xx
Can anyone think of a reason why this error could happen?
EDIT: Looks like it only happening on IE6-IE8? Stil not sure why?
EDIT 2: Thanks to #Ash Burlaczenko spot: It appears that the "http:/" i.e. missing "/" is actually what is being requested:
actual CSS Tag is:
.inner_wrapper {
position: relative;
margin:23px 28px 0;
min-height:574px;
background-color:#EEE8D6;
background-image: /* CSS3 multiple background images */
url(/assets/img/footer_arrows.gif),
url(/assets/img/footer_bg.png),
url(/assets/img/page_bg.gif);
background-repeat: no-repeat, no-repeat, repeat;
background-position: 29px 100%, 0 100%, 0 0;
overflow:hidden;
}