Archive

Archive for the ‘Designing’ Category

Colorful Typographic Experiments

February 20th, 2019 No comments
Output of using CSSans Pro, geographic shapes in multiple colors combined to make letterforms.

There have been some interesting, boundary-pushing typography-related experiments lately. I was trying to think of a joke like “somethings in the descenders” but I just can’t find something that will stand on its own leg without being easy to counter.

Codrin Pavel created a fascinating multi-color typeface called CSSans.

It’s not a “font”, because a font is a file, like “lato.woff2” or whatever. This is a CSS file, and you write in it like this:

<div class="cssans cssans--center">
    <div class="cssans__accessible">Cool News</div>

    <div class="cssans__word">
        <b class="cssans:C"></b>
        <b class="cssans:o"></b>
        <b class="cssans:o"></b>
        <b class="cssans:l"></b>
    </div>

    <div class="cssans__word">
        <b class="cssans:N"></b>
        <b class="cssans:e"></b>
        <b class="cssans:w"></b>
        <b class="cssans:s"></b>
    </div>
</div>

Note the special

at the top with the full word in it, while those empty elements do the actual drawing of the glyphs. I wouldn’t call it entirely accessible, as I’d argue part of accessibility is stuff like find-on-page with highlighting and selectable text. But this is obviously an artistic experiment and your implementation could go any number of ways. I’d love to see an attempt at setting transparent SVG over the top of it that is sized the same so that the text is selectable.

Looks like the landing page was built in CodePen Projects!

This technique and its relationship with accessibility is pretty interesting and actually more relevant than you might think. In fact, it looks like Facebook uses a similar span technique to fight ad-blocking.


Harbor Type recently put out Rocher Color, a free color font. Yes, color font. That’s a thing. And Rocher Color is actually a color font and a variable font.

Support seems kinda decent to me, but it’s complicated because there are a bunch of different kinds all with different support across browsers.

The other story is that they are, well, kinda humongous, size-wise. The woff2 file is probably the most relevant here as it’s such a modern feature anyway. The download from the site (RocherColorGX.woff2) clocks in at 178KB. Not something you’d just toss on a page for a single headline probably, considering it’s not just weight with fonts — but you’re also always fighting the FOUT/FOIT battle.

I think to justify using a beefy color font like this you’d…

  1. Use it quite a bit around the site for dynamic headlines
  2. Customize the colors to be perfect for you (ahead of time)
  3. Make use of the fancy variable font features like the bevel and shadow adjustments (on the fly)

If you don’t see yourself doing those things, you might be better off using with these shapes all expanded out to paths. You could still use this font to make the SVG, assuming your design tool supports this kind of font. You won’t get text wrapping or anything, but the file size and loading speed will be much faster. Or you could even use a graphic format like PNG/WebP, and there’s no terrible shame in that if you still use a semantic element for the headline (visually hidden, of course). You won’t get find-on-page highlighting or select-ability, but might be an OK trade-off for a one-off.

The color font works in Keynote

Kenneth Ormandy has rounded up some more interesting typographic experiments in CSS. In his post, he mentions Diana Smith’s Pure CSS Font, which builds itself from empty elements and all kinds of fancy CSS trickery to draw the shapes.

The point of this project is right in the header:

For private, SEO-hidden, CAPTCHA-friendly unselectable text. Deter plagiarism and spambots!

Hidden for assistive technology too, so careful there, but it seems to me this project is more about exploring possibilities. After all, it’s the letters that power Diana’s remarkable CSS paintings like Zigaro.

Don’t miss Kenneth’s post, as he links to lots more fascinating examples of people being typographers with very unconventional tools. Kenneth takes a crack himself with this fascinating little experiment, using a button there to expose the tricks within:

See the Pen
START Pure CSS Lettering test 1
by Kenneth Ormandy (@kennethormandy)
on CodePen.

The post Colorful Typographic Experiments appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Letters

February 20th, 2019 No comments

Did you see this Facebook crap?

“Why do I need a 4Ghz quadcore to run facebook?” This is why. A single word split up into 11 HTML DOM elements to avoid adblockers. pic.twitter.com/Zv4RfInrL0

— Mike Pan (@themikepan) February 6, 2019

I popped over to Facebook to verify that and what I saw was a different and even more nested mess:

They are trying to fight your ad blocker browser extension. Of course they are. I’m sure at their scale not doing this means losing millions of dollars. But I wonder if it’s really losing money when you factor in losing trust, and potentially losing people on the platform entirely.

It just feels so rude, doesn’t it? Like a user specifically installs technology onto their computer in order to exert some control over what they allow onto their computers and into their eyeballs. And they are saying, “No, we do not respect that choice. We are going to fight your technology with our technology and force feed this stuff onto your computer and your eyeballs.” Doesn’t sit right.

I’m not unaware that ad blockers have ad adverse effect on the ability for websites to make money. That’s quite literally how I make money. But I don’t want to do it fighting and at the expense of breaking trust. I want to do it gracefully while building trust.

Anyway.


I wonder what writing HTML to help ad blockers would look like instead:

<!-- start: advertisement -->
<div class="ad sponsor paid" id="ad-1" data-ad="true">
  <div>Sponsor:</div>
  <a href="https://sponsor.com" rel="nofollow">Company</span>
</div>
<!-- end: advertisement -->

The good ones have been doing it for ages.


This span-based lettering stuff makes me think of libraries like Splitting.js and Lettering.js that break up text into individual s for styling reasons.

Turns out that doesn’t affect on-page search (i.e. if you search for “dog,” you’ll find dog), but it does affect some screen readers in that they will treat each letter distinctly, which can result in pretty awful audio output, like pauses between letters where you wouldn’t expect or want them.

It’s totally solvable though!

I just read about how powerful aria-label is via Web Platform News, quoting Amelia Bellamy-Royds:

An aria-label attribute on a button or link effectively replaces the text content of that element with the new label.

It was cool to see that’s what Lettering.js does by default! And Splitting.js is figuring out the best method for them, which involves aria-label.


Oh, and as ever, ::nth-letter() would be cool. 2018 recap of a 2011 request.

The post Letters appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Diana Smith’s Top 5 CSS Properties She Uses to Produce CSS Art

February 20th, 2019 No comments

Have you seen Diana Smith’s CSS drawings? Stunning. These far transcend the CSS drawings that sort of crudely replicate a flat SVG scene, like I might attempt. We were lucky enough for her to post some of her CSS drawing techniques here last year.

Well, Diana has also listed the top five CSS properties she uses to get these masterpieces done, and they are surprising in their plainness:

  1. border-radius
  2. box-shadow
  3. transform
  4. gradients
  5. overflow

…but of course, layered in trickery!

… for custom rounded elements that are meant to mimic organic objects like faces, it is imperative that you become intimately familiar with all eight available parameters in the border-radius property.

Diana shows her famous Francine drawing with each of the most used properties turned off:

Without border-radius

Without transform

Be sure to check out this VICE interview she did as well. She covers gems like the fact that Francine was inspired by American Dad (lol) and that the cross-browser fallbacks are both a fascinating and interesting mess.

Direct Link to ArticlePermalink

The post Diana Smith’s Top 5 CSS Properties She Uses to Produce CSS Art appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Interview: Jorn and Koen of Framer X

February 20th, 2019 No comments

The holy grail of web design used to be a three-column layout where every column had equal height. Now, the holy grail is making it so anyone can design a website or app. Visual design apps abound, one of the big names in the Mac community right now is Framer X.

Framer X isn’t staying on only the Mac platform, though. The team has big plans, and it involves more than making it easier to push pixels. They reached out to WDD to see if we wanted to get a sneak peek of what’s coming next, and since I am one of the resident app nerds, I had the pleasure of interviewing them.

WDD: Tell us about yourselves.

Framer: So Jorn and I (Koen) worked at our first company, Sofa, together in 2009. Things really took off after we won a few Apple Design Awards, when we got a call from Mark Zuckerberg. The rest is history, as they say — our company and team were acquired by Facebook in 2011, where we ended up doubling their product design team.

We spent two years there helping launch some major product features but eventually moved back to Amsterdam and co-founded Framer in 2013. It’s been both challenging and extremely rewarding to stick to our guns and build this company in the Netherlands, even raising our Series B last year.

WDD: I’m a Windows user, so I have to ask: when is Framer X coming to Windows?

Framer: It’s in the works! We have a team working hard on this and it’s part of our plan to open up Framer X to a wider audience. I can’t give you definitive dates but you can expect something in 2019. And until then, you can sign up for the waitlist here.

WDD: What inspired you to build Framer? What’s the origin story?

Framer: When we were working at Facebook, we found ourselves pitching these innovative product ideas using traditional presentation slides. It was really frustrating to try and convey responsive, interactive design ideas to board members through static imagery – it’s just counter-intuitive.

As design has evolved, so has our thinking around tooling

Unfortunately, that’s just how things were done at the time, as interactive design was still relatively new and static images were the norm. Which is why, shortly after leaving Facebook, we co-founded Framer to focus on helping everyone better express digital product ideas.

As design has evolved, so has our thinking around tooling. While Framer Classic captured a large share of the very best designers in the world, it was only accessible to a small subset of all designers, as it used code to express ideas.

So we launched a whole new product, Framer X, which opens up interactive design to everyone, regardless of coding ability and offers interfaces for everyday design tasks like wireframing, visual design and interactive work.

WDD: What other design apps most inspired your feature choices and design?

Framer: I’ve always been very inspired by Unity – especially how accessible it is. In a sense, we are building an interactive IDE for product design that anyone can use, much like Unity has done for the gaming industry.

WDD: Your software is big on sharing and centralizing libraries of design assets, and by extension, design systems. How do you, as designers, balance the benefits of design systems (consistency and speed) with the desire for experimentation most designers feel at some point?

Framer: It is definitely a tricky balance. As a company, we have a big maker culture, with a huge emphasis on shipping. A lot of of this is because we genuinely love solving hard product problems, but just as much because our community has come to expect this of us.

As we’ve grown, we’ve come to see the value of adding some structure to this process, including creating our own React-based design system, Fraction. Everyone is still very much empowered to try and test — we even have an R&D team and leave time on Fridays for more experimental projects.

WDD: Out of all the features currently on Framer X, which are you most proud of?

Framer: We’re most proud of the features that make our app so collaborative. For example, Framer X contains a built-in store where users can publish components that can do practically anything, from media players to advanced interactive controls to entire design systems.

This means that new users can instantly leverage the work of advanced users, which provides immediate value to all users and offers incredible network effects. Our community has always been at the core of our product, and the store allows us to bring that into our product in a meaningful way.

WDD: Which feature do you most wish you’d done better with on the first try?

Framer: Interactive design is always evolving, so of course our platform is as well. Framer X’s Interactive tools — Link, Page, and Scroll — have undergone the most changes, thanks in part to the feedback we got from our beta users.

Everything that used to require lines of code in Framer Classic can now be created using the canvas tools we have. I’m not sure we would do anything differently, but hindsight being 20/20, perhaps we could have done some things sooner.

WDD: You can export elements as CSS and SVG code in Framer X. Any plans to support CSS Grid for layout?

Framer: We are planning to launch a grid tool in 2019! Stay tuned.

WDD: Where do you see Framer going in 2019?

Framer: We’re going to bring Framer X to Windows and the Web to give more people access to our interactive design tool. We’ll still be focused on making it the best tool for interactive design and with that, the best place for your team to build out your design systems.

My belief is that people are way more creative than they think and with the right platform, anyone can design. So I’d love to head toward a direction where Framer X becomes accessible enough to appeal even to people who use Powerpoint.

Thanks to Jorn and Koen for taking the time to answer our questions.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

Categories: Designing, Others Tags:

The unofficial Pantone color of the year 2020

February 20th, 2019 No comments
Pantone

Every year in December, Pantone, a color categorizing company, nominates their color of the year. Typically speaking, these colors are meant to represent something significant going on in the world. But the Pantone color of the year 2019 has stirred up quite a controversy.

Let’s start by mentioning last year’s color: ultraviolet. This wild shade of purple was chosen because it stands for originality, ingenuity, and visionary thinking.

Now, fast forward to Pantone color of the year 2019, they’ve decided on a lush red called living coral.

What’s wrong with Pantone color of the year 2019?

As I mentioned before, these colors are chosen to represent something significant. According to Melbourne based design agency Jack and Huei, this “living coral” glosses over the fact that corals are dying at an alarming rate all over the world.

Being from Australia, Jack Railton-Woodstock and Huei Yin Wong, owners of Jank and Huei are greatly concerned. You see, Australia’s waters are home to some of the most beautiful and endangered coral species on the Earth.

The unofficial Pantone color of the year

In protest to the official choice from Pantone, Jack and Huei have taken it upon themselves to create a new color of the year.

During their search for a more appropriate color, the duo came across Pantone sample #F0F6F7. This is a very pale, washed out blue that perfectly matches the dead stems of the coral being affected.

The process of coral dying is called bleaching. As the coral begins to die, it’s exposed skeleton loses all color, and becomes nothing more than a glorified stone.

In light of this color, and the name of the process, Jack and Huei decided to call the unofficial Pantone color of the year “Bleached coral” instead.

This is an issue we care about deeply and we think the creative industry has an opportunity to bring this global issue from the depths of the ocean to the surface of our screens. – Jack and Huei

Pantone’s reaction

As of right now, Pantone has yet to have any sort of reaction to this sort of protest. Most likely, they won’t have much to say.

But, the good news is that artists and designers just like Jack and Huei are using their talents and skills to bring more awareness to issues just like this one.

It’s the responsibility of all of us, creative or otherwise, to find creative solutions to big problems, and right now there aren’t many problems facing humanity that are bigger than climate change. – Jack and Huei

What’s next?

Jack and Huei’s plans are to continue their efforts well into 2020. They’ve begun to brand their newly proposed color using Pantone’s style in order to help bring in more awareness.

“Somber, yet uncomplicated, PANTONE P 115-1 U Bleached Coral harkens back to a simpler time. The subtly inoffensive hue offers a harsh reminder for how quickly things change, with a comforting, greyscale undertone that reinforces the inevitability of time.

Representing the fusion of modern life with the natural world, while straddling the fine line between hope and despair, PANTONE Bleached Coral asks the age-old question – where did it all go wrong?”

These are powerful words that bring a powerful message with them. Hopefully, the efforts of Jack and Huei, as well as others around the world will begin a new age for our planet. One where we value the natural beauty and wonders that we’re surrounded by each and every day. One where all life is valued and fought to be protected, instead of ignored. One where we can look at the issues we face, and overcome them together. We only have one Earth, it’s about time we started to treat it with respect.

Read More at The unofficial Pantone color of the year 2020

Categories: Designing, Others Tags:

15 Stunning Examples of What You Need to See in a One-Page Website Design

February 20th, 2019 No comments

5
Critical Elements that Can Make or Break Your Design

At first glance, designing a one-page
website would seem to be intuitively easy. Especially, when compared to
building a multi-pager. Designing one page takes one-third the effort of
designing three pages – right?

In reality, designing a single-pager is
generally much more difficult. The challenge you face is having to get all the
necessary information on a single page. At the same time, you need to make sure
the page is both visually appealing and user-friendly.

This guide for designing one-page websites
is centered around 5 critical elements. Depending on how well you take them
into account they can make or break your design.

As we outline each of these critical
elements, we’ll provide examples. They will illustrate their importance – 15
examples in all.

#1
The GOAL: Identify & Understand the Goal of Your Website & Work Toward
It

You might not understand perfectly what you
expect your website to accomplish. Then, there’s little sense in proceeding
with its design. It needs to have a single goal. Your design needs to take the
user on a journey that reaches that goal and responds accordingly.

Is the goal to promote or sell something?

Is it to invite a visitor to view your
portfolio?

Do you intend to announce an event or a
series of events?

Once you’ve identified the goal, you’re
almost halfway there. You still need to take into account what you need to do.
You need to avoid chasing visitors away from the page before they hit the CTA
button.

Some users are sensitive to page load speed
(more than a few are oversensitive!). So, you might choose to avoid special
effects (like parallax) that tend to reduce page load speeds.

Bistro Agency

This website’s interactive effects are above
the fold and they don’t hinder its load speed.

Be Moving 3

Dynamic images can impact load speeds. This
BeTheme pre-built one-pager features a static image that gives the
appearance of being dynamic.

Think Pixel Lab

The tiny animated items that liven up this
page’s illustration don’t slow anything down.

Be Product 2

Sometimes, it’s a page’s fresh look that makes
the sale.

Sheerlink

Here’s an example of where large images and
sliding panels will engage users.

Be App 4

You don’t need a detailed technical dissertation
to promote an app when a cool visual presentation will do the trick.

#2 TEXT: Keep It to the Minimum & Make It Easy
to Read

A one-pager
featuring clunky blocks of text or reads like a book is going to engage
visitors for a second. Sometimes, even less before they head elsewhere. Keep
text brief and in nicely-spaced sections. Strip the information down to its
bare essence.

Rely on bold
headlines, brief paragraphs, and bullet lists to make your point.

Here are several examples worth bookmarking
for future reference:

Dangerous Robot

This example illustrates how
super-entertaining a one-page website can be.

Be Tea 3

A great example of careful organization.

Hello Alfred

The essential information is above the
fold, where the use of bullet lists helps to keep the message as
straightforward and concise as possible.

Be Cakes

This pre-built website illustrates how
large attractive images help do the selling when accompanied by judiciously-placed
paragraphs of text.

Mercedes-Benz

When a vehicle has the stature of a Mercedes,
high quality images accompanied by a minimal amount of text is often
sufficient.

#3 VISUALS: Identify the Right Patterns & Use Negative
Space Wisely

Knowing how most people will scan a page is
helpful. People tend to read text in an F pattern and scan an image in a Z
pattern. Keep this in mind when you mix elements. You want the natural flow of
the information to be directed toward your goal. Wise use of white space can be
helpful.

Chris Connolly

In this example the use of white space is
calming and provides a sense of order.

WeShootBottles.com

Here a wildly creative design has been
splashed on a canvas of white space.

Be Dietician 2

The white space in this pre-built one-pager
makes the different sections appear to pop out at you and demand your
attention.

Dribble’s Year in Review

Effectively using several different design
principles to the max is a challenge, but it can be done.

Nasal Drops

Not a particularly exciting subject for a
one pager is it? This ingenious use of slides, white space, and animations
actually succeeds in making a nasal drops one-pager exciting.

#4 NAVIGATION: Make It Easy to Navigate & Entertaining
to Scroll

When
you have a long-form one-page website you have to pay close attention to how
you manage navigation. Depending on your approach, you can keep visitors locked
in or chase them off the page.

Alternative navigation is the key here.
Horizontal sticky menu or a sidebar menu are examples. Your goal should be to
enable users to jump to where they want to go with a single click, as opposed
to scrolling. Auto-scroll links enable visitors to watch the page do the
scrolling. This is yet another approach.

Sergio Pedercini

This designer’s website features 3
different auto-scrolling links.

Be Game

Be Game’s navigation experience is somewhat
out of the ordinary, and even slightly entertaining.

Be Landing 2

The color scheme, the layout structure, and
how you can scan the page with 3 mouse scrolls stand out in this example.

Brainflop

These folks really want to help you
navigate their site quickly by provided a menu on the top and one on the left.

#5 CALL TO ACTION: Identify the Correct CTA & Don’t
Hesitate to Use It

What’s nice about
a one-pager is its aim is to get people to take a single action. This normally
would involve using a single CTA button. You also might be selling several
products or services, however. Then, you may want to place a CTA button at the
end of every major section.

Be Hairdresser

In the Be Hairdresser pre-built website, one
CTA button is above the fold and one is located in the menu.

The Art of Texture

Two CTA buttons placed above the fold give
users a choice as to what they want to see.

Pyrismic

The Pyrismic site uses a simple opt-in form
with a bold CTA button.

Reneza

This site doesn’t fool around with its use
of CTA buttons. They’re used judiciously however; and with a proper choice of
colors and text sizes.

Wrapping
It Up

Now you know the 5 critical one-page
website elements. It’s simply a matter of practicing with them until their use
becomes habitual.

They may seem simple at first. Once you
start mixing them in a one-pager and attempt to do so with consistency you’ll
find it can be quite a challenge.

The good news is there’s a shortcut. Try
using pre-built websites that have already incorporated these critical
elements.

A good pre-built website resource is Be Theme It has an impressive library of more than 60 one-pagers, and 400+
pre-built websites of all kinds. Simply choose a pre-built website and
customize it to fit your needs.

Read More at 15 Stunning Examples of What You Need to See in a One-Page Website Design

Categories: Designing, Others Tags:

Social Cards as a Service

February 19th, 2019 No comments

I love the idea of programmatically generated images. That power is close at hand these days for us front-end developers, thanks to the concept of headless browsers. Take Puppeteer, the library for controlling headless Chrome. Generating images from URLs is their default use case:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

That ought to get the ol’ mind grape going. What if we had URLs on our site that — with the power of our HTML and CSS skills — created perfect little designs for sharing using dynamic data… then turned them into images and used them for our meta tags?

The first I saw of this idea was Drew McLellan’s Dynamic Social Sharing Images. Drew wrote a script to fire up Puppeteer and get the job done.

Since the design part is entirely an HTML/CSS adventure, I’m sure you could imagine a setup where the URL passed in parameters that did things like set copy and typography, colors, sizes, etc. Zeit built exactly that!

The URL is like this:

https://og-image.now.sh/I%20am%20Chris%20and%20I%20am%20**cool**%20la%20tee%20ding%20dong%20da..png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fhyper-color-logo.svg

Kind of amazing that you can spin up an entire browser in a cloud function! Netlify also offers cloud functions, and when I mentioned this to Phil Hawksworth, he told me he was already doing this for his blog!

So on a blog post like this one, an image like this is automatically generated:

Which is inserted as meta:

<meta property="og:image" content="https://www.hawksworx.com/card-image/-blog-find-that-at-card.png">

I dug through Phil’s repos, naturally, and found his little machine for doing it.

I’m madly envious of all this and need to get one set up for myself.

The post Social Cards as a Service appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Don’t Get Clever with Login Forms

February 19th, 2019 No comments

Brad points out some UX problems with a variety of apps that are doing things a little outside of the norm when it comes to their login forms. There is already a bunch of things to get right with forms to begin with (e.g. use the right input types, label your inputs, don’t have whack password requirements, use SSL, etc.)… OMG why complicate it even more?!

A “password manager test” should be a development best practice here. Does it work cleanly with the built-in browser password manager? How about 1Password and LastPass? No? Give it some love, please and thank you.

Direct Link to ArticlePermalink

The post Don’t Get Clever with Login Forms appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

How @supports Works

February 18th, 2019 No comments

CSS has a neat feature that allows us to test if the browser supports a particular property or property:value combination before applying a block of styles — like how a @media query matches when, say, the width of the browser window is narrower than some specified size and then the CSS within it takes effect. In the same spirit, the CSS inside this feature will take effect when the property:value pair being tested is supported in the current browser. That feature is called @supports and it looks like this:

@supports (display: grid) {
  .main {
    display: grid;
  }
}

Why? Well, that’s a bit tricky. Personally, I find don’t need it all that regularly. CSS has natural fallback mechanisms such that if the browser doesn’t understand a property:value combination, then it will ignore it and use something declared before it if there is anything, thanks to the cascade. Sometimes that can be used to deal with fallbacks and the end result is a bit less verbose. I’m certainly not a it’s-gotta-be-the-same-in-every-browser kinda guy, but I’m also not a write-elaborate-fallbacks-to-get-close kinda guy either. I generally prefer a situation where a natural failure of a property:value doesn’t do anything drastic to destroy functionality.

That said, @supports certainly has use cases! And as I found out while putting this post together, plenty of people use it for plenty of interesting situations.

A classic use case

The example I used in the intro is a classic one that you’ll see used in lots of writing about this topic. Here it is a bit more fleshed out:

/* We're gonna write a fallback up here in a minute */

@supports (display: grid) {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 2rem;
  }
}

Nice grid! Repeating and auto-filling columns is a sweet feature of CSS grid. But, of course, there are browsers that don’t support grid, or don’t support all the specific features of it that I’m using above there.

For example, iOS shipped support for CSS grid in version 10.2, but iOS has had flexbox support since version 7. That’s a decent gap of people with older iOS devices that do support flexbox but not grid. I’m sure there are more example gaps like that, but you probably get the idea.

I was running on an older version of mobile safari and many many many many many sites were flat out broken that used grid

I’m waiting another year or so before messing about with it

— David Wells (@DavidWells) February 6, 2019

It may be acceptable to let the fallback for this be nothing, depending on the requirements. For example, vertically stacked block-level elements rather than a multi-column grid layout. That’s often fine with me. But let’s say it’s not fine, like a photo gallery or something that absolutely needs to have some basic grid-like structure. In that case, starting with flexbox as the default and using @supports to apply grid features where they’re supported may work better…

.photo-layout {
  display: flex;
  flex-wrap: wrap;
  > div {
    flex: 200px;
    margin: 1rem;
  }
}

@supports (display: grid) {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 2rem;
    > div {
      margin: 0;
    }
  }
}

The “fallback” is the code outside of the @supports block (the properties above the block in the example above), and the grid code is either inside or after. The @supports block doesn’t change any specificity, so we need the source order to help make sure the overrides work.

Notice I had to reset the margin on the divs inside the @supports block. That’s the kind of thing I find a bit annoying. There is just enough crossover between the two scenarios that it requires being super aware of how they impact each other.

Doesn’t that make you wish it could be entirely logically separated…

There is “not” logic in @supports blocks, but that doesn’t mean it should always be used

Jen Simmons put this example in an article called Using Feature Queries in CSS a few years ago:

/* Considered a BAD PRACTICE, at least if you're supporting IE 11 and iOS 8 and older */
@supports not (display: grid) {
   /* Isolated code for non-support of grid */
}
@supports (display: grid) {
   /* Isolated code for support of grid */
}

Notice the not operator in the first block. That’s checking for browsers that do not support grid in order to apply certain styles to those browsers. The reason this approach is considered bad practice is that the browser support for @supports itself has to be considered!. That’s what makes this so dang tricky.

It’s very appealing to write code in logically separated @supports blocks like that because then it’s starting from scratch each time and doesn’t need to be overriding previous values and dealing with those logical mind-benders. But let’s go back to the same iOS situation we considered before… @supports shipped in iOS in version 9 (right between when flexbox shipped in iOS 7 and grid shipped in iOS 10.2). That means any flexbox fallback code in a @supports block using the not operator to check for (display: grid) {} support wouldn’t work in either iOS 7 or 8, meaning the fallback now needs a fallback from working in browsers it otherwise would have. Phew!

The big reason to reach for @supports is to account for very different implementations of something depending on feature support where it becomes easier to reason and distinguish between those implementations if the blocks of code are separated.

We’ll probably get to a point where we can use mutually-exclusive blocks like that without worry. Speaking of which…

@supports is likely to be more useful over time.

Once @supports is supported in all browsers you need to support, then it’s good to start using it more aggressively and without having to factor in the complication of considering whether @supports itself is supported. Here’s the support grid on that:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
28 12.1 22 No 12 9

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
9.0-9.2 46 all 4.4 71 64

Basically, IE 11 and any iOS device stuck on iOS 8 are the pain points. If your requirements are already past those, then you’re good to use @supports more freely.

The irony is that there hasn’t been a ton of CSS features shipping that have big clear @supports use cases — but there are some! Apparently, it’s possible to test new fancy stuff like Houdini:

Using it on my wedding website to check for Houdini support ??

— Sam Richard (@Snugug) February 6, 2019

(I’m not sure entirely what you’d put in the @supports block to do that. Has anyone else done this?)

When @supports isn’t doing anything useful

I’ve seen a good amount of @supports uses in the wild where the end result is exactly as it would be without using it. For example…

@supports (transform: rotate(5deg) {
  .avatar {
    transform: rotate(5deg);
  }
}

On some level, that makes perfect logical sense. If transforms are supported, use them. But it’s unnecessary if nothing different is happening in a non-support scenario. In this case, the transform can fail without the @supports block and the result is the same.

Here’s another example of that shaking out.

There are browser extensions for playing with @supports

There are two of them!

They are both centered around the idea that we can write @supports blocks in CSS and then toggle them on and off as if we’re looking at a rendering of the code in a browser that does or doesn’t support that feature.

Here’s a video of Keith’s tool applied to the scenario using grid with a flexbox fallback:


This is fun to play with and is very neat tech. But in this exact scenario, if I was able to pull off the layout identically with flexbox, then I’d probably just do that and save that little bit of technical debt.

Ire’s tool, which she wrote about in the article Creating The Feature Queries Manager DevTools Extension, has a slightly different approach in that it shows the feature queries that you actually wrote in your CSS and provides toggles to flip them on and off. I don’t think it works through iframes though, so I popped open Debug Mode to use it on CodePen.

More real world use cases for @supports

Here’s one from Erik Vorhes. He’s styling some custom checkboxes and radio buttons here, but wraps all of it in a @supports block. None of the styling gets applied unless the block passes the support check.

@supports (transform: rotate(1turn)) and (opacity: 0) {
  /* all the styling for Erik's custom checkboxes and radio buttons */
}

Here are several more I’ve come across:

  • Joe Wright and Tiago Nunes mentioned using it for position: sticky;. I’d love to see a demo here! As in, where you go for position: sticky;, but then have to do something different besides let it fail for a non-supporting browser.
  • Keith Grant and Matthias Ott mention using it for object-fit: contain;. Matthias has a demo where positioning trickery is used to make an image sort of fill a container, which is then made easier and better through that property when it’s available.
  • Ryan Filler mentions using it for mix-blend-mode. His example sets more opacity on an element, but if mix-blend-mode is supported, it uses a bit less and that property which can have the effect of seeing through an element on its own.
.thing {
  opacity: 0.5;
}
@supports (mix-blend-mode: multiply) {
  .thing {
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
}
  • Rik Schennink mentioned the backdrop-filter property. He says, “when it’s supported the opacity of the background color often needs some fine tuning.”
  • Nour Saud mentioned it can be used to detect Edge through a specific vendor-prefixed property: @supports (-ms-ime-align:auto) { }.
  • Amber Weinberg mentioned using it for clip-path because adjusting the sizing or padding of an element will accommodate when clipping is unavailable.
  • Ralph Holzmann mentioned using it to test for that “notch” stuff (environment variables).
  • Stacy Kvernmo mentioned using it for the variety of properties needed for drop capping characters. Jen Simmons mentions this use case in her article as well. There is an initial-letter CSS property that’s pretty fantastic for drop caps, but is used in conjunction with other properties that you may not want to apply at all if initial-letter isn’t supported (or if there’s a totally different fallback scenario).
  • Here’s a bonus one from Nick Colley that’s not @supports, but @media instead! The spirit is the same. It can prevent that “stuck” hover state on touch devices like this:

    @media (hover: hover) {
      a:hover {
        background: yellow;
      }
    }

    Logic in @supports

    Basic:

    @supports (initial-letter: 4) {
    
    }

    Not:

    @supports not (initial-letter: 4) {
    
    }

    And:

    @supports (initial-letter: 4) and (transform: scale(2)) {
    
    }

    Or:

    @supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    
    }

    Combos:

    @supports ((display: -webkit-flex) or
              (display: -moz-flex) or
              (display: flex)) and (-webkit-appearance: caret) {
    
    }

    JavaScript Variant

    JavaScript has an API for this. To test if it exists…

    if (window.CSS && window.CSS.supports) {
      // Apparently old Opera had a weird implementation, so you could also do:
      // !!((window.CSS && window.CSS.supports) || window.supportsCSS || false)
    }

    To use it, either pass the property to it in one param and the value in another:

    const supportsGrid = CSS.supports("display", "grid");

    …or give it all in one string mirroring the CSS syntax:

    const supportsGrid = CSS.supports("(display: grid)");

    Selector testing

    At the time of this writing, only Firefox supports this sort of testing (behind an experimental flag), but there is a way to test the support of selectors with @supports. MDN’s demo:

    @supports selector(A > B) {
    }

    You?

    Of course, we’d love to see Pens of @supports use cases in the comments. So share ’em!

    The post How @supports Works appeared first on CSS-Tricks.

    Categories: Designing, Others Tags:

    instant.page

    February 18th, 2019 No comments

    instant.page is a pretty cool project from Alexandre Dieulot. Alexandre has been at this idea for half a decade now, as InstantClick is his and is essentially the same exact idea.

    The idea is that there is a significant delay between hovering over a link and clicking that link. Say it takes you 300ms of delay. That 300ms could have been spent preloading the next page. And if you do use that time preloading, that page loads that much faster.

    This new project makes use of newer tech to get it done. It’s hardly any code., the core of which is appending a to the document of the link you’re about to click/touch.

    The page encourages you to hotlink the script, which means possible cache-hits in case you’ve already visited a page using this. It’s not risky in the way other third-party JavaScript can be because the integrity attribute means that if you trust the code as it is now, it can’t ever change unless you change that attribute along with it. It also cleverly uses the type="module" to prevent it from loading anything in browsers that don’t support prefetching anyway.

    Still, you could self-host it if you wanted. I have no idea who’s ponying up the for the bandwidth here, so another risk is a hung script should it stop responding one day.

    You could argue that it doesn’t do the prefetching as absolutely responsibly as it could. Google’s similar quick link library (which we covered here) does two interesting things in which to attempt to be more responsible with prefetching: 1) wait for requestIdleCallback and 2) respects info from navigator.connection, like a user enabling data-saver mode.

    Direct Link to ArticlePermalink

    The post instant.page appeared first on CSS-Tricks.

    Categories: Designing, Others Tags: