PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

This vs. That

August 24, 2020
in Web Dev
283 9
This vs. That


Here’s a nice site from Phuoc Nguyen, who I’ve noted before has quite a knack for clever sites. This vs. That pits different related concepts against each other as a theme for an article. For example, CSS has display: none;, opacity: 0;, and visibility: hidden; and they all, on the surface “hide” something, but they are all markedly different in ways that are important to understand. That’s one of the articles. The content is open source as well, if you feel like adding anything.

This reminds me of this Pen from Adam Thompson:

CodePen Embed Fallback

All that Pen is doing is setting the colors of some pill boxes, but it does it in literally seven different ways — in this case, none of them are “better” than another:

  1. Swap a class
  2. Swap a class, colors defined in Sass @mixin
  3. Swap a class, class swaps value of a custom property
  4. Swap the value of a custom property
  5. Swaps the value of a custom property, colors stored in JavaScript only
  6. Set inline styles
  7. Manipulate the CSSOM
  8. Set a non-standard color attribute

They all ultimately do the same thing. And there could be many more: change class on a higher-up parent. Use data-* attributes. Use some kind of hue-shifting filter. Use color math in JavaScript to manipulate hues. Use the checkbox hack to change styling. Surely there are even dozens more.

Direct Link to Article — Permalink


The post This vs. That appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.



Source link

Share219Tweet137Share55Pin49

Related Posts

Intrinsic Typography is the Future of Styling Text on the Web
Web Dev

Intrinsic Typography is the Future of Styling Text on the Web

The way we style text hasn’t changed much over the years. There have been numerous advancements to help make...

April 20, 2021
Say Hello To CSS Container Queries
Web Dev

Say Hello To CSS Container Queries

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent...

April 20, 2021
Keep Logs Tidy With the Log Cleaner Package for Laravel
Web Dev

Keep Logs Tidy With the Log Cleaner Package for Laravel

Laravel Log Cleaner is a package by Joost van Veen for keeping your log files small and tidy. While...

April 20, 2021
Making GraphQL Work In WordPress — Smashing Magazine
Web Dev

Making GraphQL Work In WordPress — Smashing Magazine

About The AuthorLeonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless...

April 20, 2021
Next Post
Where Does Logic Go on Jamstack Sites?

Where Does Logic Go on Jamstack Sites?

Building a blockchain application in Java using Amazon Managed Blockchain : idk.dev

Building a blockchain application in Java using Amazon Managed Blockchain : idk.dev

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

How to Get Sticky and Full-Bleed Elements to Play Well Together

How to Get Sticky and Full-Bleed Elements to Play Well Together

December 4, 2020
The Ultimate Performance Checklist For Laravel Apps

The Ultimate Performance Checklist For Laravel Apps

February 13, 2021
YubiKey 5C NFC Security Key Lets You Use NFC for Authentication

YubiKey 5C NFC Security Key Lets You Use NFC for Authentication

September 10, 2020
Adding a Custom Welcome Guide to the WordPress Block Editor

Adding a Custom Welcome Guide to the WordPress Block Editor

June 15, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In