CSS3 transition in phpstorm - css

I use phpstorm, but in the CSS file it won't work for code completion like -webkit-translate, translate or animation.
What should I do?

Already fixed in new versions of PHPStorm.

Related

Bootstrap and CSS

I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.

I'm trying to use #keyframes to animate the background-color of an element but it's not working in Atom. What's the problem?

I'm new to coding and I'm learning how to use HTML and CSS. I downloaded Atom and I'm practicing on it. I'm trying to use the #keyframes function to animate the background-color of my square element but it doesn't seem to work on my web-browser (Firefox). I don't know what am I doing wrong.
image of the code:
Try using prefixes for crossbrowser support.
You can use a tool sutch as https://autoprefixer.github.io/
Autoprefixer is a PostCSS plugin which parse your CSS and add vendor prefixes.

Sass files not working on IE

I'm developing a rails application and I've issue when run site on IE9. All of sass files not working on IE. If I want the site run on IE9, I've sort sass files in application.scss.
I don't know why. I have been work with other rails applications in the past, this is the first time sass files require sorted.
So, is there anyone like me? Please help me.
Detail about my application:
Rails 4
Sass 3.2
Foundation framework latest version 5.2
Slim template
Ps: I've added respond.js and html5shiv.js into layout/application.
It not SASS that is not working in IE but rather the rules that you created through it. You should check for what CSS rules are supportet by IE. A good source is http://caniuse.com/
IE9 still has CSS limits. If your application.css has more than 31 import links or more than 4095 rules, that's probably why you're experiencing this. If that's the case, you should definitely refactor your stylesheets.
You do have gems like CSS Splitter to deal with this, but honestly if you're running into those limits it's probably a good time to reorganize your assets.
As #Severin has suggested, SASS isn't the problem - it's your CSS:
Sass is completely compatible with all versions of CSS. We take this
compatibility seriously, so that you can seamlessly use any available
CSS libraries
SASS is basically another way to write CSS - it's precompiled on deploy and basically renders "pure" CSS for use in the browser
Your case with IE is not likely to do with your SASS - it's probably an issue with your CSS. Can you post your application.css?

Dojo's Support towards CSS3

Does Dojo have any work around to support CSS3
Gradient
Box shadow
Rounded Corner
cross browser support. if not what you guys will suggest with an app build on Dojo to acheive the above.
It does for most browsers except IE (AFAIK), using the claro theme makes it easy as it's built on top of the lesscss framework and mixins are provided to make gradiends, box-shadows and Rounded corners... See http://download.dojotoolkit.org/release-1.8.3/dojo-release-1.8.3/dijit/themes/themeTester.html?theme=claro to check what it looks like in the different browsers you target...
You can easily extend those lesscss mixins to add shims for IE with whatever tricks you need (PIE for example. See http://css3pie.com/)
To get you started quickly, have a look at these files :
dijit/themes/claro/variables.less : that's where you put your theme's custom variables (colors, etc.)
dijit/themes/claro/compile.js : that's the script you launch to recompile your theme after you made modifications to your .less files. This requires you install nodejs. It's documented in the README file in the same directory.
Of course, it's better not to touch any of the claro theme's files directly as they may be overriden if you update dojo, but the compile.js script is a good starting point for creating your own theme-building script based on your own needs and structure.

Wordpress breaks CSS hover slider

I have a pure CSS mouseover slider fully functional here http://jsfiddle.net/gU4sw/13/ .
When I add this code to my wordpress page, it doesn't work... :(
Can someone please check to see if there a quick fix or explanation for this?
P.S: By the way, I was able to install the same exact slider code on another wordpress installation without any problems, yet it doesn't work for this installation for some reason :(
Your css rules are missing your wordpress css thats the main issue you are facing. In fiddle the css is working on hover but in wordpress css its not present try to check you css again.
Update:
In you css rule is not closed at line 499. right curly brace } is missing thats why below this rule all css is ignoring.
.abul { list-style-image:url(/wp-content/themes/Chameleon/images/barrow.gif);
try to close this and see whether css will work or not. I have tested in FF firebug your desired css is not including.

Resources