CSS-Tricks·5yFirebase Crash Course
Firebase is a platform that provides the infrastructure for developers and tools for marketers. While Firebase can make up the entirety of your app’s back-end, you can use each product individually as well. Each product is designed to empower a part of an application's infrastructure. Firebase also gives you insight into how your app is performing and what your users are doing.
CSS-Tricks·5yDid You Know About the :has CSS Selector?
The :has CSS selector is going to have a big impact on how we write CSS in the future. In fact, if it ever ships in browsers, I think it breaks my mental model for how CSS fundamentally works because it would be the first example of a parent selector in CSS. :has isn’t supported in browsers right now (probably for those performance reasons), it is part of the CSS Selectors Level 4 specification.
CSS-Tricks·5yA Super Flexible CSS Carousel, Enhanced With JavaScript Navigation
The Easy Carousel is a simple carousel component that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive. We’re going to be working with quite a bit of JavaScript, React and the DOM API from here on out. Let’s start by bootstrapping a simple React application with styled-components tossed in for styling.
CSS-Tricks·5yHow to Map Mouse Position in CSS
The goal is to create an invisible grid on the screen, and use the :hover pseudo-class to map each ‘cell’ to a set of values that we will allocate to the custom properties. We will use the mouse position to set the value of these properties, and then use them set the .square element’s width and height accordingly.
CSS-Tricks·5y:where() has a cool specificity trick, too.
The :is() pseudo-selector is now supported in all major browsers. The specificity thing is extra-interesting. Miriam notes some trickery you could do with it, like juicing up specificity without actually selecting anything. If we were to use :where() instead, the specificity of the entire : where() part is zero (0)
CSS-Tricks·5yHow to Animate the Details Element
The tricks? Turn off the default triangle: details summary::-webkit-details-marker { display:none; } . You can’t animate that one. Make a replacement triangle with the CSS border trick and a pseudo element. Animate the new triangle when the state is open: details[open] > summary::before { transform: rotate(90deg); } .
CSS-Tricks·5yWeb Components Are Easier Than You Think
The <template> element is the base from which everything else is built. The <slot> element customizes what the < template> renders on the page. The name attribute tells the web component which content goes where in the template. The spec prescribes that to prevent conflicts with the event that HTML releases when a new element is created.
CSS-Tricks·5yTools for Auditing CSS
Auditing CSS is not a common task in a developer’s everyday life, but sometimes you just have to do it. In this article, we’ll look at some of the best tools for auditing CSS in Chrome DevTools. We’re using Brave, which is Chromium-based, but you might also want to check out this article.
CSS-Tricks·5yInteractive Web Components Are Easier Than You Think
In the last article, we looked at a zombie dating service profile, complete with a custom <zombie-profile> element. We reused the element for each profile and populated each one with unique info using the ::slotted() element. This article assumes a base level of knowledge about web components. We’ll leave swiping for another article.