Author: Chris Coyier

Posted on

Currying in CSS

Featured Imgs 23

Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don't fully understand) and I came across some CSS they show off that looked like this:

:root {
  --fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));
  --fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));
 
  ...
}

See anything weird there? That code is using mathematical operators, but there is no calc() function wrapped around it.

Just as my curiosity set in, Trys Mudford, a creator of Utopia, blogged it:

The value after the : in the CSS custom property does not have to be valid CSS. It won’t cause any errors, nor invalidate the custom property. It won’t be evaluated in the browser until used, or more specifically, placed in a calc() function.

Here's a contrived example:

:root {
  --padding: 1rem;
  
  /* These are meaningless alone */
  --padding-S: var(--padding) / 2;
  --padding-L: var(--padding) * 2;
}

.module--large {
  /* But they evaluate once they are in a calc() */
  padding: calc(var(--padding-L));
}

In my limited understanding, currying is like functions that return functions. I suppose this is sorta like that in that the alternate padding properties above are sort of like derivative functions of the main padding function (if you can call it that), and you only call them and execute them as needed.

The post Currying in CSS appeared first on CSS-Tricks.

Posted on

How I think about solving problems

Category Image 052

Nicholas C. Zakas:

Eventually, I settled on a list of questions I would ask myself for each problem as it arose. I found that asking these questions, in order, helped me make the best decision possible:

1) Is this really a problem?
2) Does the problem need to be solved?
3) Does the problem need to be solved now?
4) Does the problem need to be solved by me?
5) Is there a simpler problem I can solve instead?

We've talked about what it takes to be a senior developer before, and I'd say this kind of thinking should be on that list as well.

Direct Link to Article — Permalink

The post How I think about solving problems appeared first on CSS-Tricks.

Posted on

When CSS Blocks

Featured Imgs 25

Tim Kadlec:

One particular pattern [for loading non-critical CSS] I’ve seen is the preload/polyfill pattern. With this approach, you load any stylesheets as preloads instead, and then use their onload events to change them back to a stylesheet once the browser has them ready.

So you're trying to make your stylesheet more async, but it causes two big problems:

  1. You've kicked up the priority of the downloading higher than any other asset.
  2. You've blocked the HTML parser too (because of the polyfill as an inline script).

Firefox does something fancy to avoid problem #2 in this particular case, but it affects every other browser.

I've never had good luck with fancy techniques to trick the browser into theoretically better downloading/rendering patterns. I'm kind of a stylesheets in the head, scripts at the end of the body kinda guy, but I know the web is a complicated place. In fact, in a quick peek, I see that Jetpack is inserting an inline script into my <head>, so that would affect my loading too, except they load it with an obfuscated type until later scripts execute and change it, probably to avoid this exact problem.

Anyway, Tim's advice:

• If you’re using loadCSS with the preload/polyfill pattern, switch to the print stylesheet pattern instead.

• If you have any external stylesheets that you’re loading normally (that is, as a regular stylesheet link), move any and all inline scripts that you can above it in the markup

• Inline your critical CSS for the fastest possible start render times.

The print pattern being:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Direct Link to Article — Permalink

The post When CSS Blocks appeared first on CSS-Tricks.

Posted on

Chameleonic Header

Category Image 052

Nice demo from Sebastiano Guerriero. When a fixed-position header moves from overlapping differently-colored backgrounds, the colors flop out to be appropriate for that background. Sebastiano's technique is very clever, involving multiple copies of the header within each section (where the copies are hidden from screenreaders) which are all positioned on top of each other and then revealed as the new section comes, thanks to each section having a clip-path around it.

A bonafide CSS trick if I've ever seen one.

It makes me wish there was an easier way of doing it. Like, what if there was some magical value of mix-blend-mode that would handle it? I got close enough that it gives me hope.

Direct Link to Article — Permalink

The post Chameleonic Header appeared first on CSS-Tricks.

Posted on

Fixed Headers and Jump Links? The Solution is scroll-margin-top

Category Image 052

The problem: you click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That's totally fine, until you have a position: fixed; header at the top of the page obscuring the header you're trying to link to!

Fixed headers have a nasty habit of hiding the element you're trying to link to.

There used to be all kinds of wild hacks to get around this problem. In fact, in the design of CSS-Tricks as I write, I was like, "Screw it, I'll just have a big generous padding-top on my in-article headers because I don't mind that look anyway."

But there is actually a really straightforward way of handling this in CSS now. 

h3 {
  scroll-margin-top: 5rem; /* whatever is a nice number that gets you past the header */
}

We have an Almanac article on it, which includes browser support, which is essentially everywhere. It's often talked about in conjunction with scroll snapping, but I find this use case even more practical.

Here's a simple demo:

In a related vein, that weird (but cool) "text fragments" link that Chrome shipped takes you to the middle of the page instead, which I think is nice.

The post Fixed Headers and Jump Links? The Solution is scroll-margin-top appeared first on CSS-Tricks.

Posted on

monica.css

Featured Imgs 23

Monica Dinculescu:

I don’t want every possible padding and margin and colour and flexbox configuration in the world. I just want the ones that I know I end up using in every project. So here is monica.css: my very own CSS framework, which I copy paste at the beginning of every CSS file and take it from there.

I love it when people make their own CSS starter. I like Sanitize, but even that feels like a bit much for most things I poke around at. If I was making one for myself, I'd probably steal some of this stuff from Monica. I'd definitely pull the margin off body as I find myself writing that line a lot. I'd probably steal some of that [class] stuff from Andy's. My center class would probably just be text-align and I'd give myself some other centering class for my other favorite centering: display: grid; place-items: center;.

I love how everyone agrees on box-sizing.

Direct Link to Article — Permalink

The post monica.css appeared first on CSS-Tricks.

Posted on

CodePen for Education Questions, Answered

Featured Imgs 23

I got a bunch of questions from a "Head of Customer Success" at a company that does developer education recently. They had some great questions about how CodePen could be used in their online courses1. The answers might benefit anyone in this situation, so here's exactly what I was asked and what I answered.

Which would be the best plan for the online course described?

Here's one way instructors/students can use CodePen for a course. The instructor has a curriculum for the course. Part of that includes coding exercises for the students. Those coding exercises can take the form of a pre-created Pen on CodePen. Maybe like this. The students then Fork that Pen and try to complete it, and they send the instructor their attempts.

Here's another way instructors can use CodePen. They teach live using the CodePen editor. Maybe it's projected onto the front of a classroom using Presentation Mode, or the students follow along on their own computers using Professor Mode. Those two features are PRO, so the instructor would need a PRO account.

Here's another. The instructor (or school) gets a Team Account. All the students are invited as members of the Team. That makes everyone involved have a PRO account, so they can do things like make Private Pens and share uploaded assets like images. As a new cohort comes in the students can be removed from the team and new students added.

Could it be billed monthly, quarterly or annually?

We offer monthly or annual billing on any of our plans (but not quarterly).

When is it billed? (at the beginning or at the end of the month?)

We bill the second you sign up, and then at intervals based on that day. For example, if you sign up on March 14th and choose a monthly plan, you'll be charged again April 14th. If you picked a yearly plan, you'll be charged again March 14th the following year.

Is the billing variable or fixed per term?

Plans are mostly fixed. If you go with a Team Account, Teams are charged based on the number of seats, so you can increase or decrease those seats at any time and are re-billed accordingly.

Is the billing per registered users, active users?

Only Team Accounts are billed on a per-user basis. Team Accounts are $12-per-person if billed annually or $19-per-person if billed monthly. If what worked better for you was only having the instructor with a PRO account, for example, that's a single user with a single fixed cost.

Our online courses are on-demand, so is it possible to switch on and off the course according to our needs per month?

Yes, you can cancel and re-activate on a monthly basis if you choose the monthly plan.

Our dedicated page for CodePen and Education is probably also worth a read.

1 - This kind of thing is sometimes a sign that the design of your site doesn't help answer these questions well enough. In this case, I'm not that worried about that. I think we do OK there, although this is good research for the next time we're tackling those areas.

The post CodePen for Education Questions, Answered appeared first on CodePen Blog.

Posted on

Solving Sticky Hover States with @media (hover: hover)

Category Image 052

Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium¹.

If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is a chance that :hover state "sticks." You'll see this with stuff like jump-links used as tabs or buttons that trigger on-page functionality. 

button:hover {
  border: 3px solid green; /* might stick! */
}

The solution, or trick, is a new(ish) "CSS4" media query that allows you only to apply styles on devices with hover capability.

@media (hover: hover) {
  button:hover {
    border: 3px solid green; /* solves sticky problem */
  }
}

Your typical touch screen mobile device will fail that media query, the style won't apply, and you'll avoid the sticky problem.

Support is solid, so not much worry there.

  1. It almost feels like we have to apologize to linking to things on Medium lately. I have no idea what you're going to experience when you get there. Will you just be able to read it? Will it be a teaser where you have to log in to read more? Will it be behind a paywall? I have no idea. In this case, hopefully, this link post has enough info in it that isn't not blocking you from learning anything.


Direct Link to Article — Permalink

The post Solving Sticky Hover States with @media (hover: hover) appeared first on CSS-Tricks.

Posted on

Editor Activity Indicator

Featured Imgs 23

You might notice a smidge of extra visual activity happening down in the Pen Editor footer lately. We're trying to show you a bit more information about what the Pen Editor is actually doing.

Here's an example (5 second video) where I'm editing some HTML to include an <em> tag or not, and the editor is doing stuff to make that happen for me:

The idea is to show you (and us!) what is happening in the Pen Editor as we do it. Like sometimes code needs to get processed. Sometimes the preview needs to get rebuilt. Sometimes your code is off being linted or formatted. There is a bunch of stuff that might be going on in the editor, and we wanted a dedicated place to be clear about that rather than having it be a silent mystery.

The post Editor Activity Indicator appeared first on CodePen Blog.

Posted on

Creating a Details Element That Opens But Never Closes

Category Image 052

The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary> element with a toggle triangle (▶︎) next to it. Click that to expand the rest of the text inside the <details> element.

But let's say you want to be able to click it open and that's that. Interactivity over. I saw this used in one of those "Read more" article designs, where you click that "Read more" button and the article expands, but there is no going back.

I'll preface this by saying that I'm not sure that this is a great idea in general. Removing controls just doesn't feel great, nor does slapping too much important content within a <details> element. But, hey, the web is a big place and you never know what you might need. The fact that this can be done in a few lines of HTML/CSS is compelling and might reduce the need for heavier solutions.

The main trick here is to hide the summary when details is open. 

details[open] summary {
  display: none;
}

That's it really.

The post Creating a Details Element That Opens But Never Closes appeared first on CSS-Tricks.

Posted on

CSS4 is a Bad Idea

Featured Imgs 23

Louis Lazaris, reacting to the idea of CSS4:

The reason “CSS3” worked is because it was real. It was the successor to “CSS2.1”. Everything after CSS2.1 was considered to be under the umbrella of “CSS3”.

The gist is that CSS4 isn't real, so won't work, and we don't need it anyway. Perhaps I overestimate the power of marketing, but I'd wager Louis underestimates it a bit. When an idea takes hold, basis in truth or not, it has tremendous power and money follows. See: politics and pet rocks.

Amelia Bellamy-Royds pointed out that there is a real thing we could point to, and those are "CSS Snapshots" that the working group produces that could be marketed as yearly versions. Like we have ES2019, we could have CSS2020.

Direct Link to Article — Permalink

The post CSS4 is a Bad Idea appeared first on CSS-Tricks.

Posted on

Freshly Designed Assets Modal

Featured Imgs 23

When you're working in the Pen Editor, you have complete access to both all the files you've uploaded (Asset Hosting is a PRO feature) as well as a slew of free design resources we make available to you.

Click that Assets button in the footer, and the Assets modal will pop up. We've just redesigned this area to be more useful and more in-line with other areas of the site, like our recently redesigned Pen Settings.

The biggest bit of feedback we were working from is that, for PRO members, it was too hard to access your own files. In fact, in some screen sizes and configurations, the Your Files section could have been totally off-screen and it wasn't obvious you could scroll to it. In this new design, Your Files is front-and-center when you open the modal, and all the other free resources are still there and easy to click over to.

Let us know if you have any feedback!

The post Freshly Designed Assets Modal appeared first on CodePen Blog.

Posted on

HTMLHint

Featured Imgs 23

Along with our recent release of using Prettier for code formatting, we've also now upgraded our HTML linter to use HTMLHint instead of html-inspector. Interestingly, they have about the same number of stars on GitHub, but html-inspector is archived and no longer maintained while HTMLHint is actively maintained.

You use it by selecting Analyze HTML from the editors actions menu.

For us, it also meant being able to send off your HTML to our own service, just like we do with all our preprocessors. We weren't doing that with html-inspector as it was meant to be injected into the DOM to run and we had a fancy little process for doing that. It's much better this way for security and consistent handling of code services on our end.

Config

This is for all Pens on the entirely of CodePen, it can't be customized on a per-Pen or per-Account basis. Here's how we have it set up:

{
  'alt-require': true,
  'attr-lowercase': true,
  'attr-no-duplication': true,
  'attr-unsafe-chars': true,
  'attr-value-double-quotes': true,
  'attr-value-not-empty': false,
  'doctype-first': false,
  'doctype-html5': false,
  'empty-tag-not-self-closed': false,
  'head-script-disabled': false,
  'href-abs-or-rel': true,
  'id-class-ad-disabled': false,
  'id-class-value': false,
  'id-unique': true,
  'inline-script-disabled': false,
  'inline-style-disabled': false,
  'space-tab-mixed-disabled': 'space',
  'spec-char-escape': true,
  'src-not-empty': true,
  'style-disabled': false,
  'tag-pair': true,
  'tagname-lowercase': true,
  'title-require': false
}

I post this mostly because we've already had to make some small changes to it after release. For example, we had a value set for id-class-value that is meant to be an opinionated way you should name your ids and classes. That doesn't make sense on CodePen. Y'all can do whatever you like with naming. This is more about finding things in your HTML that are almost certainly a mistake or would cause a problem.

The post HTMLHint appeared first on CodePen Blog.

Posted on

Full Stack Panic

Category Image 052

A new podcast from Sean Fioritto inspired by Joel Califa's term "Full Stack Anxiety".

... the little voice in your head says ... “I should know all of this. Do I even know what I'm doing?” Why do web developers the world over feel like this?

There is an episode with Joel talking about it as well as other interesting angles like an episode with psychologist Dr. Sherry Walling.

The overall vibe is that of catharsis in that, hopefully, none of this matters as much as it seems like it might. I'd like to think we try to deliver that, through a bit of levity, on ShopTalk Show as well.

Oh hey and Panic started a podcast too, a must-subscribe from me as a long-time fan of all their interesting work.

Direct Link to Article — Permalink

The post Full Stack Panic appeared first on CSS-Tricks.

Posted on

Four Layouts for the Price of One

Category Image 052

Pretty notable when a tweet about a flexbox layouts gets 8K+ likes on Twitter!

That's "native" CSS nesting in use there as well, assuming we get that at some point and the syntax holds.

There was some feedback that the code is inscrutable. I don't really think so, to me it says:

  • All these inputs are allowed both to shrink and grow
  • There is even spacing around all of it
  • The email input should be three times bigger than the others
  • If it needs to wrap, fine, wrap.

A great use case for flexbox, which is the right layout mechanism when you aren't trying to be super precise about the size of everything.

There is a blog post (no byline 🤷‍♂️) with a more longwinded explanation.

This reminds me a lot of Tim Van Damme's Adaptive Photo Layout where photos lay themselves out with flexbox. They don't entirely keep their Aspect ratios, but they mostly do, thanks to literally the flexibility of flexbox.

Here's a fun fork of the original.

It's like a zillion layouts for the price of one, and just a few lines of code to boot.

The post Four Layouts for the Price of One appeared first on CSS-Tricks.

Posted on

Woodworking SVG (and Other Real Life Encounters)

Category Image 052

Eric Meyer does his woodworking math in SVG.

I’ve been hand-coding SVG schematics to figure out how thing should go together, and as a by-product, guide me in both material buying and wood cutting.

This might sound hugely bespoke and artisanally overdone, but they’re not that complicated, and as a major benefit, the process has helped me understand SVG a little bit better.

Letterpress

This all reminds me of my own SVG-meeting-real-life scenario. Years back, when I had access to a letterpress shop, I had some SVG converted into printable plates to make fun little bits of art.

First I did a little SVG shape morphing to get some in-progress morphs:

Then I used those SVGs in Illustrator to create a design, which I sent off to a special company to make me a letterpress plate out of polymer.

Then I used that plate to print the designs

Which turned out pretty cool!

Direct Link to Article — Permalink

The post Woodworking SVG (and Other Real Life Encounters) appeared first on CSS-Tricks.

Posted on

Flexible Captioned Slanted Images

Category Image 052

The end result of Eric Meyer's tutorial on creating this row of slanted images is pretty classy. But it's more about the journey than the destination (there isn't even really an isolated demo for it). Eric does an amazing job at talking it through like a thought process.

We did that recently, only ours was sort of fake/generic which Eric's was for a real-world design.

  • This is a row of boxes, so flexbox. Eric pondered if grid would have been as good or better of a choice since the widths are known and either can be made to accept more/less boxes without adjustment. I agree it's a tough call here.
  • Since the image dimensions being manipulated, object-fit is a must, and the less-used object-position is used here to help with a focal point.
  • The captions are just pushed to the bottom of the boxes naturally by the images.
  • The slanting is done with clip-path, but it involves some trickery. The boxes need to be enlarged to clip without leaving blank space, then pulled together with negative margin. Percentages are used all around to keep things flexy.
  • Still more tweaks are needed to keep from clipping the captions, and then there is still opportunity for more clever design bits.

Sad that this is probably the last time I'll link to 24 ways.

Direct Link to Article — Permalink

The post Flexible Captioned Slanted Images appeared first on CSS-Tricks.