Tags: browsers

442

sparkline

Thursday, July 20th, 2017

Container queries

Every single browser maker has the same stance when it comes to features—they want to hear from developers at the coalface.

“Tell us what you want! We’re listening. We want to know which features to prioritise based on real-world feedback from developers like you.”

“How about container quer—”

“Not that.”

I don’t think it’s an exaggeration to say that literally every web developer I know would love to have container queries. If you’ve worked on any responsive project of any size, you’re bound to have bumped up against the problem of only being able to respond to viewport size, rather than the size of the containing element. Without container queries, our design systems can never be truly modular.

But there’s a divide growing between what our responsive designs need to do, and the tools CSS gives us to meet those needs. We’re making design decisions at smaller and smaller levels, but our code asks us to bind those decisions to a larger, often-irrelevant abstraction of a “page.”

But the message from browser makers has consistently been “it’s simply too hard.”

At the Frontend United conference in Athens a little while back, Jonathan gave a whole talk on the need for container queries. At the same event, Serg gave a talk on Houdini.

Now, as I understand it, Houdini is the CSS arm of the extensible web. Just as web components will allow us to create powerful new HTML without lobbying browser makers, Houdini will allow us to create powerful new CSS features without going cap-in-hand to standards bodies.

At this year’s CSS Day there were two Houdini talks. Tab gave a deep dive, and Philip talked specifically about Houdini as a breakthrough for polyfilling.

During the talks, you could send questions over Twitter that the speaker could be quizzed on afterwards. As Philip was talking, I began to tap out a question: “Could this be used to polyfill container queries?” My thumb was hovering over the tweet button at the very moment that Philip said in his talk, “This could be used to polyfill container queries.”

For that happen, browsers need to implement the layout API for Houdini. But I’m betting that browser makers will be far more receptive to calls to implement the layout API than calls for container queries directly.

Once we have that, there are two possible outcomes:

  1. We try to polyfill container queries and find out that the browser makers were right—it’s simply too hard. This certainty is itself a useful outcome.
  2. We successfully polyfill container queries, and then instead of asking browser makers to figure out implementation, we can hand it to them for standardisation.

But, as Eric Portis points out in his talk on container queries, Houdini is still a ways off (by the way, browser makers, that’s two different conference talks I’ve mentioned about container queries, just in case you were keeping track of how much developers want this).

Still, there are some CSS features that are Houdini-like in their extensibility. Custom properties feel like they could be wrangled to help with the container query problem. While it’s easy to think of custom properties as being like Sass variables, they’re much more powerful than that—the fact they can be a real-time bridge between JavaScript and CSS makes them scriptable. Alas, custom properties can’t be used in media queries but maybe some clever person can figure out a way to get the effect of container queries without a query-like syntax.

However it happens, I’d just love to see some movement on container queries. I’m not alone.

I know container queries would revolutionize my design practice, and better prepare responsive design for mobile, desktop, tablet—and whatever’s coming next.

Friday, July 14th, 2017

(Now More Than Ever) You Might Not Need jQuery | CSS-Tricks

Thanks to jQuery, you probably don’t need jQuery. Just look at all these methods that started life in jQuery, that are now part of the standardised DOM API:

  • remove()
  • prepend()
  • before()
  • replaceWith()
  • closest()

Wednesday, July 5th, 2017

Is it really safe to start using CSS Grid Layout?

Rachel uncovers a great phrase for dealing with older browsers:

It isn’t your fault, but it is your problem.

She points to multiple ways of using CSS Grid today while still providing a decent experience for older browsers.

Crucially, there’s one message that hasn’t changed in fifteen years:

Websites do not need to look the same in every browser.

It’s crazy that there are still designers and developers who haven’t internalised this. And before anyone starts claiming that the problem is with the clients and the bosses, Rachel has plenty of advice for talking with them too.

Your job is to learn about new things, and advise your client or your boss in the best way to achieve their business goals through your use of the available technology. You can only do that if you have learned about the new things. You can then advise them which compromises are worth making.

Monday, July 3rd, 2017

Fixing fieldsets — That Emil is Emil Björklund

This is an excellent proposal from Emil. If we can apply display: contents to fieldsets, then we would finally have a way of undoing the byzantine browser styles that have hindered adoption of this element. This proposal also ensures backwards compatibility so there’d be no breakage of older sites:

The legacy appearance of fieldsets probably needs to be preserved for compatibility reasons. But display: contents is not supported in any old browsers, and is most likely used on exactly zero sites using the legacy look of fieldsets.

Whaddya say, browser makers?

Sunday, June 25th, 2017

Daring Fireball: Medium and the Scourge of Persistent Sharing Dickbars

A website should not fight the browser. Let the browser provide the chrome, and simply provide the content.

This post is about Medium, but I think there’s a lesson here for progressive web apps too. A progressive web app should not fight the browser. Are you listening, Google?

Thursday, June 22nd, 2017

Purists versus Pragmatists

How the IETF redefined the process of creating standards.

To some visionary pioneers, such as Ted Nelson, who had been developing a purist hypertext paradigm called Xanadu for decades, the browser represented an undesirably messy direction for the evolution of the Internet. To pragmatists, the browser represented important software evolving as it should: in a pluralistic way, embodying many contending ideas, through what the Internet Engineering Task Force (IETF) calls “rough consensus and running code.”

And now, a brief definition of the web - The Verge

Analysing what the web is. It’s not the technology stack.

To count as being part of the web, your app or page must:

  1. Be linkable, and
  2. Allow any client to access it.

I think that’s a pretty good definition.

Mind you, I think this is a bit rich in an article published on The Verge:

The HTML web may be slow and annoying and processor intensive, but before we rush too fast into replacing it, let’s not lose what’s good about it.

Excuse me? Slow, annoying, processor-intensive web pages have nothing to do with the technology, and everything to do with publishers like The Verge shoving bucketloads of intrusive JavaScript trackers into every page view.

Still, we can agree on this:

Preserving the web, or more specifically the open principles behind it, means protecting one of the few paths for innovation left in the modern tech world that doesn’t have a giant company acting as a gatekeeper.

Sunday, June 11th, 2017

With New Browser Tech, Apple Preserves Privacy and Google Preserves Trackers | Electronic Frontier Foundation

It’s interesting to see how excessive surveillance is (finally!) being treated as damage and routed around. Apple seem to get it—they’re tackling the tracking issue. Meanwhile Google are focusing purely on the visibility and UX of invasive advertising, without taking steps against tracking.

There’s a huge opportunity here for Chrome’s competitors—if Firefox and Safari protect users from unwarranted tracking, that could be enough to get people to switch, regardless of the feature sets of the browsers.

Tuesday, June 6th, 2017

Intelligent Tracking Prevention | WebKit

This is an excellent move by Apple—interpreting cross-site tracking as damage and routing around it.

Tuesday, May 23rd, 2017

Service Worker Security FAQ - The Chromium Projects

Got questions about the security of service workers? This document probably has the answer.

Sunday, April 16th, 2017

Phishing with Unicode Domains - Xudong Zheng

Domains registered with punycode names (and then given TLS certificates) are worryingly indistinguishable from their ASCII counterparts.

Can you spot the difference between the URLs https://adactio.com and https://аdаctіо.com?

Saturday, April 15th, 2017

The invisible parts of CSS · MadebyMike

This is a really clear explanation of how CSS works.

Friday, April 14th, 2017

Think you know the top web browsers? – Samsung Internet Developers – Medium

So do you really know which are the top browsers, both amongst your existing customers and your potential audience? Perhaps it’s worth taking a closer look; it might just be time to check your site in some of the lesser-known, yet popular browsers like UC, Yandex and Samsung Internet.

Tuesday, April 4th, 2017

Jeremy Keith Interview

I had a chat with Toby Osbourn over Skype. He’s writing a book all about print stylesheets so that’s we talked about.

Friday, March 24th, 2017

Scrolling on the web: A primer - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

A ludicrously deep dive by Nolan into how scrolling works in web browsers. No, wait, come back! It’s more interesting than it sounds …and it certainly isn’t as simple as you might think.

For instance, do you know the difference between the following scenarios?

  • User scrolls with two fingers on a touch pad
  • User scrolls with one finger on a touch screen
  • User scrolls with a mouse wheel on a physical mouse
  • User clicks the sidebar and drags it up and down
  • User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard

If you ask the average web user (or even the average web developer!) they might tell you that these interactions are all equivalent. The truth is far more interesting.

This comes complete with lovely animated illustrations by Rachel.

Tuesday, March 21st, 2017

The web share API | Phil Nash

I really need to have a play with this API. I think it could potentially be a useful indie web building block …if the web share target API also gets implemented.

Monday, March 20th, 2017

World Wide Web, Not Wealthy Western Web (Part 2) – Smashing Magazine

The second part of Bruce’s excellent series begins by focusing on the usage of proxy browsers around the world:

Therefore, to make websites work in Opera Mini’s extreme mode, treat JavaScript as an enhancement, and ensure that your core functionality works without it. Of course, it will probably be clunkier without scripts, but if your website works and your competitors’ don’t work for Opera Mini’s quarter of a billion users, you’ll get the business.

But how!? Well, Bruce has the answer:

The best way to ensure that everyone gets your content is to write real, semantic HTML, to style it with CSS and ensure sensible fallbacks for CSS gradients, to use SVG for icons, and to treat JavaScript as an enhancement, ensuring that core functionality works without scripts. Package up your website with a manifest file and associated icons, add a service worker, and you’ll have a progressive web app in conforming browsers and a normal website everywhere else.

I call this amazing new technique “progressive enhancement.”

You heard it here first, folks!

Monday, March 6th, 2017

PushCrew Push Notifications for HTTP websites

A nasty service that Harry noticed in his role as chronicler of dark patterns—this exploits the way that browser permissions are presented below the line of death.

W3C and EME: it isn’t about preventing DRM but saving the W3C – Baldur Bjarnason

A damning assessment of Tim Berners-Lee’s defeatist portrayal of the W3C:

No matter which side is right, the W3C faces an existential crisis.

Either:

  1. The W3C is a shepherd of the web for all, the web on everything, and a web of trust. But now it is fundamentally compromising its own principles in the name of maintaining industry relevance.
  2. Or, the W3C is merely an industry body for browser vendors to collaborate and its mission statement is nothing more than PR to increase buy-in from the smaller, largely powerless, members.

Both can’t be true. Neither is good news for the organisation.

Friday, March 3rd, 2017

On EME in HTML5 | W3C Blog

Much as I respect Tim Berners-Lee, his logic here is completely flawed. First of all, treating DRM as though it’s an implacable force of nature is a category error. Secondly, EME doesn’t in any provide a standardised solution: it provides a sandbox for each DRM vendor to inject their own proprietary solution.