CSS Pie not working with correct path to file - css3pie

I'm trying to use CSS PIE in my website, but for some reason it's not working.
My folder structure looks like this:
And my CSS like this:
.region-sidebar-first-inner .block-menu-block-1 {
background: #730868;
margin-bottom: 70px;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#730868), to(#0a9f9d));
background: -webkit-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -moz-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -ms-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -o-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
-pie-background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
behavior: url(pie/PIE.htc);
}
When I check my PIE.htc-file in Chrome, the path links to the correct file, so it's a valid path.
And although the CSS Pie warns me about Note: this path is relative to the HTML file being viewed, not the CSS file it is called from, that's not working for me either... So something else must be wrong and I don't have any idea what.

The path in behavior: url(...); must be relative to the HTML file in which you are using that style, not relative to the CSS file!

You must link your PIE.php (or PIE.htc, but PIE.php is better because this include PIE.htc and you have not problem with .htaccess file) from file where you include CSS file (CSS where you are using PIE).
My situation which work:
behavior: url(funkce/PIE.php);
Tree (this files/folders is on same level):
Font (folder)
funkce (folder)
img (folder)
template (folder)
slash_something.php (file)
In template folder I have folder css and in it I have CSS file where use PIE. PIE.php file I have in folder "funkce". => I muset link "funkce/PIE.php"
=> in your situation a tip on - behavior: url(css/pie/PIE.htc);

Related

Using variables outside of sass files in a React project

I am install sass lib in my React project.
I created a main.sass file where I included other sass files by type of color_variables. These variables are visible in this file, but when I import the main.sass file itself into JS files and try to access the variables through it, I get an error that the variable was not found. I didn't include sass in webpack dependencies, wanted to try without it.
main.sass
#import "color_variables"
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;500;600;700&display=swap')
*
margin: 0
padding: 0
body
margin: 0
padding: 0
font-family: 'Nunito Sans', sans-serif
background: $background
color_variables.sass
$black:#1c1c1c
$accent: #cc33ff
$grey:#bab3bc
$borders: #e1dfe2
$background: #fafafa
$white:#ffffff
Error when trying to access a variable while main.sass is imported
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable
You need to export the variable. Below is the example.
//colors
$black: #000000;
$white: #ffffff;
$zanah: #e0efdc;
$aquaDeep: #02433c;
$whiteSand : f6f6f6;
:export {
zanah: $zanah;
}
you should use #use instead of #import
#use 'color_variables' as CV;
then add those variables like this..
background: CV.$background;

react-slick carousel CSS, "Failed to compile" error

I'm having an issue with my react-slick carousel. I'm following official documentation and installation steps but I'm getting this error:
It seems to be a very common error, and I've tried solution which I've found here on stackoverflow - delete this block of code from slick-theme.scss.
/* Slider */
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
/* Icons */
#if $slick-font-family == "slick" {
#font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
Firstly, it doesn't help, but after 5 minutes of trying to find another solution it magically starts working and now, after 10 minutes of trying to configure it, stylize it and add content to slides, this error fires again.
Does anybody please have solution for this? Or maybe some advice for different React carousel which is not as buggy as this one? Even if it starts working for 10 minutes, some features didn't work, for example, dots, the were no arrows for switching slides, etc.
Thanks for any help.

React production build differs from development | polyfill does not run

I've run npx create-react-app . and imported clip-path manually. Development build works without a problem, but the production one doesn't seem to work. Issue is the same on IE11 and Edge44
Steps to reproduce:
npx create-react-app .
add "ie 11" to browserslist in package.json for prod and dev
npm i react-app-polyfill
in index.js add import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
Grab shapes-polyfill.js from css-shapes-polyfill and insert script in .index.html > head, and also add browser polyfill.
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src='shapes-polyfill.js'></script>
include <style> in index.html > head
<style>
#polygon-shape-outside {
width: 200px;
height: 200px;
float: left;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><polygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/></svg>");
shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
}
</style>
Insert div in App
<div style={{
width: 400,
fontSize: 10,
background: 'grey'
}}>
<div id="polygon-shape-outside"></div>
<p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.</p>
</div>
The image didn't show in IE because of IE is strict to SVG. You can refer to this Codepen Blog for details and here are the points:
Most browsers are lenient about the charset= string, but it's required for Internet Explorer. That means you need to use ;charset=utf8, instead of ;utf8,.
You will have to percent-encode characters that aren't URL-safe. For example, <svg> to %3Csvg%3E. You can minimize the amount of percent encoding that needs to be done by using single quotes ' instead of double quotes ".
According to this, I changed some parts of your code in <style> of index.html:
#polygon-shape-outside {
width: 200px;
height: 200px;
float: left;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'%3E%3Cpolygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/%3E%3C/svg%3E");
shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
}
Then it can run well in dev mode in all browsers.
About the difference between dev mode and prod mode: add data-shape-outside="polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px)" in <div id="polygon-shape-outside">. Then the content will wrap around the image and the page runs well and exactly the same in both modes and in all browsers.

React, Sass, getting an error when importing img from a .scss file

I want to set a simple background image with an overlay to a react component from a sass file, but I am getting this error, Module not found: You attempted to import ../assets/hero.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported., this is very strange as the assets folder that contains the image is actually inside the /src folder, here is my folder structure
src/
|assets/
hero.jpg
|sass/
|main.scss
|sassFiles/
|components.scss
|..
|components/
|Navbar.js
|Home.js
|..
|App.js
|index.js
|..
/* _components.scss file */
.hero {
height: 60vh;
background: linear-gradient(rgba(238, 238, 238, 0.459)), url(../../assets/hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
when I import the image from the component like so import hero from '../assets/hero.jpg', it works fine,
the error occurs only when I import it from the .scss file, other than that, styles are being applied with no problems.
What error are you seeing in the web inspector? Trying changing the relative path to your image from:
url(../../assets/hero.jpg)
To:
url(../assets/hero.jpg)

CSS3PIE border-radius does not compute :(

Hey all. I've done tons of searching and still nothing. My element has the following CSS and the PIE.htc file is definatly in the correct folder. Still no curvey corners in IE6-8 :(
#nav {
width:500px;
border:2px solid #eee;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(/PIE.htc);
position:relative;
z-index: 0;
}
Check that your PIE.htc file is being served with the correct HTTP content-type header. It needs to be "text/x-component", but some servers do not have this set up correctly and send something like "text/plain" or "text/html" instead; IE will ignore the behavior file if this is the case.
More suggestions can be found at http://css3pie.com/documentation/known-issues/

Resources