Are there limits to the HtmlDialog where perhaps the version is not completely up to date? Does it use CSS 3?
For example, I get an error in the Chrome Dev Tools console when attempting to apply box-shadow to certain elements.
Thanks!
Of course there are. The Chrome Embedded Framework within SketchUp is only updated periodically at release times. (It does not autoupdate like the Chrome browser will.)
The API and SketchUp natively use a bundled CEF. If you wish to know the exact version support create a UI::HtmlDialog that opens the URL: chrome://flags
CSS consists of separate modules that can be adopted separately. These modules first are at the Working Draft status.
As testing and feedback are received the status can be updated to Candidate Recommendation. AFAIK, this is the current status level of the CSS Backgrounds and Borders Module Level 3.
When it is finally released and approved it’s status will be Recommendation (for implementation.)
During the Working Draft status stage, web rendering engines often test new features out by using vendor prefixes …
-webkit-for Chrome, Safari, CEF, (other Chromium based browsers)-moz-for Firefox-o-for Opera-ms-for MS Internet Explorer
When a module (or revision) reaches the Candidate Recommendation status, vendors (of rendering engines) are encouraged to remove the need of prefixes. However, some vendors do not implement the newer CSS attributes until the Recommendation stage.
So … you could try using the attribute: -webkit-box-shadow as well as the unprefixed box-shadow (to cover when it is supported.)
This is general advice for new recommend CSS attributes.
However, … looking at the page: box-shadow - CSS: Cascading Style Sheets | MDN
… and then scrolling to the bottom where the Browser compatibility tables are, …
… the tables indicate that Chrome supports it since ver 10 without prefix. (It supported it first in v 1 with a prefix, ie: -webkit-box-shadow.)
BUT … many of the browser rendering engines have layout issues that need to also be considered. (For example, it only works on MSIE if border-collapse is also set separate.)
The Chrome compatibility has a * that you should read.
So make sure that you are not hard setting a size for the outer parent element that will cause the shadow not to appear (or be hidden.)
Well, the simple answer is, … not all elements in all browsers may support a particular CSS attribute.
We’d naturally think that a box shadow might only be supported for block elements and perhaps not inline elements. (But this is just speculation.)
What kind of elements are you having issues with ?
Hi Dan, just that fancy CSS styles like box-shadow applied in the inspector don’t take…
In Chrome…
In SU HtmlDialog…
If you hover over the warning icon does it give you any information ?
Does your HTML have a proper DOCTYPE tag ?
Oh… I did just notice the <div> you show above is set to 100% of it’s parent’s width and height.
As I tried to say above there needs to be space to show the shadow around the child (the <div> in this case.) My previous comment said to watch out for the size of the parent, but it also applies to the child element to which you are “shadowing”.
The shadow is a border style and it’s is rendered outside the element. You have set the <div> to be 100% the size of the parent which will not allow any space to display the shadow.
Looks like DOCTYPE is fine…
<!DOCTYPE html>
and the div is set to 100px not 100% so there is room for expansion.
Sorry I read that as %. I do need to get checked for newer glasses. 
Can you post a ruby snippet and html showing the issue ?
I actually did not even put this in my script because I could not get past the inspector! …so no ruby snippet.
hovering over the error gives me “invalid property name”
I’m attempting to apply the box-shadow to a div element.
and here is what chrome://flags returned…
| CEF | 3.2924.1575.g97389a9 |
|---|---|
| Chromium | 56.0.2924.76 |
| OS | Mac OS X |
| WebKit | 537.36 (@cc6576b53870d39ddafd3574d951ff36d5f7218e) |
| JavaScript | 5.6.326.42 |
| Flash | |
| User Agent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 SketchUp Pro/18.0 (Mac) Safari/537.36 |
| Command Line | –no-sandbox --product-version=Chrome/56.0.2924.76 SketchUp Pro/18.0 (Mac) --lang=en-US --log-file=/Users/imac/Library/Application Support/SketchUp 2018/WebCache/debug.log |
| Module Path | /Applications/SketchUp 2018/SketchUp.app/Contents/Frameworks/Chromium Embedded Framework.framework/Chromium Embedded Framework |
| Cache Path | /Users/imac/Library/Application Support/SketchUp 2018/WebCache |
Okay, well, as I explained above it is up to the vendor when to implement non-prefixed CSS properties from modules that have not yet reached the “Recommended” status.
So your next task is to try a prefixed property, ie … -webkit-box-shadow
If this also does not work, as said, there may be another CSS property that needs to also be set correctly.
It may be time to delve into Chromium box-shadow issues.
ADD: FYI, SketchUp 2019 and 2020 are up to CEF ver 64.0.3282.119
1 Like