css

position:sticky : Adding style when the element detaches from normal flow

by

I just found the answer here https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ As of today you do need to use javascript: const el = document.querySelector(“.myElement”) const observer = new IntersectionObserver( ([e]) => e.target.classList.toggle(“is-pinned”, e.intersectionRatio < 1), { threshold: [1] } ); observer.observe(el); #parent { height: 2000px; } .myElement { position: sticky; top: -1px; } /* styles for when the header … Read more

currentColor in background image svg

by

This doesn’t work as you expect it to because using url() makes the SVG be treated as if it were an external resource, even if it’s not exactly the case. So there is no way to use CSS’ currentColor within your SVG when it’s a background image. For this specific case, you could instead use … Read more

What is the difference between “opacity” and “filter: opacity()”

by

filter: opacity() is similar to the more established opacity property; the difference is that with filter: opacity(), some browsers provide hardware acceleration for better performance. Negative values are not allowed. filter: opacity() applies transparency. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are … Read more

CSS – add transform to element without removing the existing one [duplicate]

by

Update 2022 At the end of last year the W3C published the working draft for “CSS Transforms Module Level 2”. This spec adds new transform functions and properties for three-dimensional transforms, and convenience functions for simple transforms. It adds “Individual Transforms”: translate scale rotate As the browser-support is over 85% it should be usable, if … Read more

Using object-fit on a with child elements, including a

by

I don’t know if it’s ok for you, but I think it can be done mostly in css if you allow a little bit more HTML. Consider the following html <div class=”outerContainer”> <div class=”canvasContainer”> <canvas width=”640″ height=”360″></canvas> </div> <div class=”beside”> </div> </div> I just added a little div around the canvas. This way we let … Read more

Get computed value of CSS variable that uses an expression like calc

by

Technically you cannot because the computed value is not static and will depend on other properties. In this case it’s trivial since we are dealing with pixel value but imagine the case where you will have percentage value. Percentage is relative to other properties so we cannot compute it until it’s used with var(). Same … Read more

Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks

by

im doing someting like this in my Webpack 4 configuration. const MiniCssExtractPlugin = require(“mini-css-extract-plugin”) module: { rules: [ { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: “css-loader”, options: { modules: true, sourceMap: true, importLoader: 2 } }, “sass-loader” ]} ] }, plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)