CSS Shapes
-
Is this advanced feature supported by the WP pre processor? I want to try out some things on a jazzed up Chrome browser.
see
The blog I need help with is: (visible only to logged in users)
-
Good question. :) CSS Shapes are super new, and very cool! They aren’t supported yet, but I just put in a request for them to be added and I will keep you posted on progress.
-
thx — i will probably code up a post text wrapping around some image and have it appear as a Codepen embed. let me know when we will be rid of the “tyranny of the rectangle” on WP. by the way, the Brackets editor from Adobe (free) with shapes extensions is really a handy tool, especially when dealing with polygons which can be quite tedious. cheers.
-
Brackets sounds cool. The WordPress.com CSS Editor is currently powered by CodeMirror. The tool choice isn’t the blocker for shape properties though, we have extra security checks in place and because of that all new properties need to be allowed in explicitly. Since CSS Shapes are so new though, and not yet even supported by all major browsers, it might not be added until later. So CodePen sounds like a cool workaround for now. :)
-
-
hmm I’m pretty sure I coded the CSS up right, and am using Chrome 39 to view the WP page, but the boilerplate text ain’t wrapping around the image as it supposed. Any ideas?
PS Yes, I know this not a WP issue, strictly speaking, but for those who may be interested, I thought it might be of interest to dabble in some advanced CSS3 functionality. Cheers!
-
I took a look at this, but I’m not sure either! I haven’t done much with CSS Shapes yet. I’ll keep trying though and I’ll post updates here with what I find as soon as I have new info.
-
-
this appears to be related to a Chrome security issue
I turned on the Chrome Dev Tools and looked at the Console and saw this
Image from origin ‘https://needlepointlandstore.files.wordpress.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
so it seems that while my CSS code is valid, the frog image is somehow not being loaded for styling (although the browser displays it — this does not make sense!)???? I dont know, this really seems to be getting at the internals of Chrome and not really something an ordinary person using valid CSS should have to start trying to figure out. kind of really annoying to waste time on something that seems tangential to the business of writing valid CSS shapes-related code, and gets into the domain of cross scripting nonsense, of which I know very little.
-
-
i realized that I could inspect if the image resource in the css was being loaded. sure enough, it wasn’t.
so i uploaded the image a second time to WP media, and replaced the original URL (which remains in the markup) in the CSS with this new URL
still did not work
so i consulting this Chrome Cross Origin documentation
and have now come to the conclusion that there is a Google bug that does not allow the deriving of wrappable shapes from images to work due to this browser’s Cross Origin security feature. in effect, the CSS3 is correct, but there is no image resource for it to work on, because the browser thinks that a script wants to work on two images from two different URLs – or something to that effect.
any feedback would be appreciated.
-
I used Dev tools in Chrome and checked that the request header were the same
Also disabled cache to determine in this was a CORS problem
it wasntthe only difference between the GET request in the markup and the GET in the CSS is that one an image appears in preview in the first but not the second
it seems that that second GET is successful (I get status codes of 200 OK when I disable cache — partial 206 content caching codes when I dont) so it would seem an image is return but cannot be handled correctly by the shape-outside property. again, methinks is starting to look like a chromium bug as I have not seen working example, that is to say, examples that work in codepen where the demo executes correctly
here is the css in question
shape-outside: url(https://needlepointlandstore.files.wordpress.com/2014/11/king-frog1.png);
any feedback as to my theories, as always, most appreciated -
I researched this a bit more and I found that in the “shape-outside” property, url() values respect CORS. Cross-Origin Resource Sharing (CORS) is a security precaution, not a Google bug. I think the setup for it is not trivial when multiple different domains are involved like they are at WordPress.com (i.e. your web pages are served from needlepointland.com while your images are served from needlepointlandstore.files.wordpress.com and your custom CSS is served from s0.wp.com or s1.wp.com or s2.wp.com). Security concerns come in addition to that.
So to get it to work, the images would need to be loaded from the same domain as the page or the WordPress.com servers would need to be changed to supply CORS headers in a different way. Changing the headers involves auditing how the security around that works as a first step and is not something available to change right now at WordPress.com, but I have made a note of it in the ticket I’ve raised for adding CSS Shapes support. WordPress.com has fairly protective and restrictive security measures, for example JavaScript is not allowed, so changing how CORS headers works here is probably not something that can be added in the short term, and may be decided against depending on a number of factors. It’s also noteworthy that yours is the only request I have seen so far about CSS Shapes, and because the demand is not high other issues will probably get triaged before it until more people become interested. I’m sorry I don’t have a better answer for you! You’ve done some awesome research.
As a workaround, would it be possible for you to try hosting the images you’re using, such as the king frog image, on a different server to see if they work with your CodePens that way? I think it might work because I tried embedding the CodePen http://codepen.io/adobe/pen/Brtdz on my WordPress.com test blog and the “shape-outside” property with the image URL https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/wine-jug.jpg worked.
-
thx. this solution worked perfectly. the problem was, as we both suspected, CORS. what made no sense is that I was using the same URL in my CSS and HTML, never suspecting that the markup and images and CSS were being hosted by WP on different domains. So I put up a pic of the frog on imgur (not AWS, which demands that u leave a cc on file, even for the free option), and Css3 Shapes using images set against a transparent background (the alpha channel) now works perfectly. I did play with gimp a bit to create a thin border ribbon around the frog before so the text would not be smack against it. I think this is a very cool CSS3 feature. As someone who is becoming deeply immersed in front end design using advanced CSS3 in the retail space, I see limitless possibilities for really interesting store catalog designs etc. I would request that WP up the schedule for supporting this, as I think many many users would find this very attractive, particularly when Firefox starts to support it, and the standard begins to support responsive design too. again, many many thx. I learned a lot from this exercise about Chrome internals and how WP.com is set up.
- The topic ‘CSS Shapes’ is closed to new replies.
WordPress.com Forums 
