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.
Related
In Vaadin Flow (versions 10 and later), is there some way to dynamically change the font, font size, font color and such of the widgets in a Vaadin layout?
I do know the basics of CSS, but don’t know much about SASS or other supersets of CSS though I am willing to learn. And I do not know what supersets of CSS are being used by Vaadin Flow.
I know I can dynamically assign or remove CSS style names to a widget at runtime. But that means the CSS style must already be defined.
➥Is there some way to assign arbitrary font styling at runtime?
The short answer is yes. And this is one of the major changes between Vaadin Platform version 10 and later compared to Vaadin 8 and earlier. In Vaadin Platform theming is not based on SASS anymore.
The reason for this change is because we use web components to create the client "widgets", and web components are based on latest HTML5 standard. They introduce so called shadow DOM and local DOM concepts. I.e. the internals of the web components cannot be styled in global theme. So number of new concepts for theming is needed. Custom properties, themable mixins, etc. We have chapter in our documentation describing this in detail.
Your particular question can be addressed with CSS custom properties. They are basically CSS variables, and have notation --my-property. There is example in documentation how to add custom properties to custom widgets. Values of these custom properties can be defined in global styles and/or run time via Element API of Flow element.getStyle().set("--my-property", "red");.
Also those styles that are exposed naturally can be modified run time using Element API element.getStyle(), like element.getStyle().set("fontWeight", "bold");
So in general Vaadin Flow offers much more features for dynamic styling than Vaadin 8 ever did.
See also: Vaadin Flow/10/11 style component via 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?
I have a web application and for that we have CSS. We are porting the UI to JavaFX and intend to style it exactly the same way as it there on the web application. I tried loading the CSS which is used in the web project for this, but the style does not get reflected.
After a bit of searching i figured out that Oracle has created something called JavaFX CSS which is similar to CSS but not exactly CSS.
What I wanted to find out: is there some easy way to convert my (web) CSS to JavaFX CSS?
some easy way to convert my (web) CSS to JavaFx CSS
There is no automated convertor for this task. I advise you to take a little bit of your CSS and try to manually convert it by hand.
You, may be able to use analysis tools such as the CSS Analyzer in SceneBuilder to help with this task.
Refer to the JavaFX CSS Reference whilst performing your conversion.
If you have specific issues on converting elements or attributes between your JavaFX and HTML css files, then post new questions regarding those conversion difficulties.
We are porting the UI to JavaFx and intend to style it exactly the same way as it there on the Web Application.
That's going to be a little tricky if you have a lot of CSS. JavaFX CSS is not the same as web based HTML css. JavaFX CSS files share a common syntactic format with HTML CSS, but all of the css attributes in JavaFX differ from those found in HTML CSS.
HTML CSS can specify layout properties to be rendered by an HTML rendering engine. The JavaFX layout and rendering engine works differently from HTML, so HTML CSS based layout specifiers won't have direct equivalents in any of JavaFX CSS, JavaFX code or FXML defined layout managers.
Still, JavaFX CSS is very flexible. Many things are similar to HTML css (like region background and color specifiers), so it is possible to convert the gist of the HTML CSS to JavaFX CSS with acceptable accuracy in a reasonable amount of time, provided you are pretty skilled in both CSS forms. Just don't expect your JavaFX application and your web application to look or behave exactly the same.
Oracle has created something call JavaFX CSS which is similar to CSS but not exactly CSS.
JavaFX CSS is really just CSS in terms of its syntax and file format. CSS as used in JavaFX follows all of the basic syntax and data types of W3C CSS.
W3C CSS is what you term in your question as plain CSS or (web) CSS. There are many extensions and proposed extensions to W3C CSS and many of these extensions aren't even well supported across major browsers.
Consider using WebView for some parts of your application
Rather than port your entire application from HTML to JavaFX, you may want to keep some of the application in HTML and port other parts of the application to JavaFX controls.
JavaFX includes a WebView component which can be easily embedded in a JavaFX application. WebView can accurately render HTML, and it can parse and understand W3C CSS. You could use some of your existing CSS and HTML to style and render parts of your JavaFX application.
Because JavaFX CSS and W3C CSS share a common file format, you could even place both JavaFX CSS styles and W3C CSS styles in the same CSS file and the JavaFX and WebView runtimes would be clever enough to apply the appropriate styles when rendering their specific components.
See Also
JavaFX CSS Reference Guide
Learning CSS (JavaFx style)
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.
I were looking for a CSS Framework to help me built website, when I struck with Compass.
Now, while I understand what a CSS Framework is, I don't understand what's a CSS Authoring Framework.
Expecially, I don't understand if it "replaces" a CSS Framework (like blueprint) or you should use it with a CSS Framework.
I'm building a website using Ruby On Rails, and I use SASS but no CSS Frameworks at the moment. If anyone can point me in right direction after answering the question, it will be really appreciated.
Edit 1:
Also, which is the difference between a CSS Framework and a CSS Authoring Framework
A CSS Framework is (in most cases) a fixed set of basic CSS definitions.
f.e. it brings definitions for some classes which make a basic div-based HTML-layout usable for different screen-widths. (aka liquid layout)
A CSS Authoring Framework (in meaning of Compass) brings no fixed set of CSS definitions. In opposite to a standard CSS Framework, it helps to write CSS rules with various helpers - but you have to write almost every CSS definition by your own. Some examples for helpers: Compass helps you to fix some common browser issues (IE floats ..). And you can create CSS sprites from existing images with all the CSS definitions on the fly.
You can write your own CSS Framework with the help of a CSS Authoring Framework, or you can simple build on top of a existing CSS Framework.
CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.
Layout-grid-related CSS frameworks include Bootstrap, Blueprint, 960 grid, YUI CSS, and other grids.
Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML .
They provide a number of ready-made options for designing and laying out the web page. While many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.
Somehow, CSS framework == CSS Authoring framework