Sass files not working on IE - css

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?

Related

Where is the SASS version of all styles for Bootstrap 4?

Bootstrap makes a great deal of how they fully switch to SASS from version 4. However, when I browsed my node_modules, I realized that everything there is still in SCSS.
I know that the difference isn't that big but I do like the absence of curlies and I'd prefer to see SASS-like SASS-ing.
Where can I find the ortodox SASS source code? Or am I missing something profound and am simply reasoning mistakenly?

Extent of CSS3 support in JavaFX

What is the extent of CSS3 support in JavaFX? According to documentation
JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version 2.1 [1] with some additions from current work on version 3 [2]
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#introscenegraph
Cannot find anything specific here.
1) However how much percentage of CSS3 is supported in JavaFX?
The CSS3 specification must have come along way since this was first mentioned in the JavaFX CSS specifiaction.
2) What from CSS3 is supported?
There is only one mention of CSS3 in the JavaFX CSS specification.
3) Is it possible to use SASS with JavaFX CSS?
4) What changes does Java 9 have in regards of CSS support?
Although this is a 2yo question, I will answer for the sake of people. There is so little information about JavaFX css and sass, so I hope this answer will be of a help to someone.
1+2) I don't know the exact percentage but my experience with CssFX shows that very little original css3 code got into my css files. Most of the attributes are CssFX ones. Furthermore, there are many css3 attributes that defined on some JavaFX component, but not on others. I suggest you just learn it while going.
3) Yes, it is possible, and I did it just now in my current project.
Sass is a powerful framework to use with css, but eventually, the sass compiles the sass/scss code to a regular css, which can be used in your JavaFX app. just use the CssFX attribute in the sass code instead of the standard css3 attributes.
I'm using eclipse, so I've downloaded LiClipse from the market, which lets me view my .scss files from within their eclipse built-in editor. Sometimes I use SublimeText instead because of its extra tools.
About the sass/scss to css compilation, as I'm working with Maven, I use the maven-sass-plugin (specifically this one) to compile my project's scss files every time that I run my application. In addition, I've added to my project a builder, which compiles my scss files every time that a scss file has been changed (Sass builder example)
4) This is a question about Java 9 css support, which is barely related to the main topic of this question - which is JavaFX css - and should be asked as another topic.

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.

How to make compatibale a css design for all the browsers?

I made a web page with HTML and PHP and design it with CSS. When I open this webpage in Mozill aFirefox, it works as I designed but when I open it in Internet Explorer, the design of page does not according to the settings I designed in CSS file. How to fix it?
You can fix it by either add CSS to your current css file to correct it. Or make a new css specifically for each browser. That happens because each web browser displays it a little differently. IE that handles CSS and HTML differently more so than all the others.
Cross browser css has been difficult for years! But there is a framework that tries to make it easier.
http://sass-lang.com/ Sass compiles your code and generates cross-browser css. There is a ruby gem that will 'watch' your files for you and generate the css on the fly.
Good Luck!

Create css files compatible with multiple browsers automatically

Is there any solution that allows you to design a webpage (with, say, a wysiwyg editor) and then automatically compile the design as one or several css file(s) compatible across multiple browsers?
Typically, using a WYSIWYG editor will generate superfluous entries to your HTML mark-up and create inefficient stylesheets that don't make use of CSS shorthand.
The best way to create stylesheets that are compatible across multiple browers sadly just comes with experience. By knowing the quirks of IE6 and IE7 you automatically cater for them as you create the stylesheet.
A good reset stylesheet will help to erradicate any default differences between browsers, such as line height, body padding, etc.
The exact solution you're after doesn't exist (yet).
I really don't think so. There are some CSS frameworks trying to deal with this issue, the more popular one I know is called YAML. Some JavaScript libraries are dealing with cross browser CSS issues, too (don't know a particular example at the moment though).
You may want to use PHP to write the content of a .CSS file.

Resources