design tips

They are both URL paths. They have different names, though.

<!-- root-relative -->
<a href="./dogs.html">Dogs</a>

<!– absolute –>
<a href=”/dogs.html”>Dogs</a>

There are also fully-qualified URLs that would be like:

<!-- fully qualified -->
<a href="https://website.com/dogs.html">Dogs</a>

Fully-qualified URL’s are pretty obvious in what they do — that link takes you to that exact place. So, let’s look those first two examples again.

Say you have a directory structure like this on your site:

public/
├── index.html
└── animals/
├── cats.html
…

The post What’s the difference between ./dogs.html and /dogs.html? appeared first on CSS-Tricks.

Here’s a CSS variable (formally called a “CSS custom property“):

:root {
--mouse-x: 0px;
--mouse-y: 0px;
}

Perhaps you use them to set a position:

.mover {
left: var(--mouse-x);
top: var(--mouse-y);
}

To update those values from JavaScript, you’d:

let root = document.documentElement;

root.addEventListener(“mousemove”, e => {
root.style.setProperty(‘–mouse-x’, e.clientX + “px”);
root.style.setProperty(‘–mouse-y’, e.clientY + “px”);
});

That’s all.

See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen.…

The post Updating a CSS Variable with JavaScript appeared first on CSS-Tricks.