Archive for month: March, 2020

Original Source: https://www.smashingmagazine.com/2020/03/introduction-alpinejs-javascript-framework/

Introducing Alpine.js: A Tiny JavaScript Framework

Introducing Alpine.js: A Tiny JavaScript Framework

Phil Smith

2020-03-05T11:30:00+00:00
2020-03-05T21:09:09+00:00

Like most developers, I have a bad tendency to over-complicate my workflow, especially if there’s some new hotness on the horizon. Why use CSS when you can use CSS-in-JS? Why use Grunt when you can use Gulp? Why use Gulp when you can use Webpack? Why use a traditional CMS when you can go headless? Every so often though, the new-hotness makes life simpler.

Recently, the rise of utility based tools like Tailwind CSS have done this for CSS, and now Alpine.js promises something similar for JavaScript.

In this article, we’re going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to build interactive websites. If you regularly build sites that require a sprinkling on Javascript to alter the UI based on some user interaction, then this article is for you.

Throughout the article, I refer to Vue.js, but don’t worry if you have no experience of Vue — that is not required. In fact, part of what makes Alpine.js great is that you barely need to know any JavaScript at all.

Now, let’s get started.

What Is Alpine.js?

According to project author Caleb Porzio:

“Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit.”

Let’s unpack that a bit.

Let’s consider a basic UI pattern like Tabs. Our ultimate goal is that when a user clicks on a tab, the tab contents displays. If we come from a PHP background, we could easily achieve this server side. But the page refresh on every tab click isn’t very ‘reactive’.

To create a better experience over the years, developers have reached for jQuery and/or Bootstrap. In that situation, we create an event listener on the tab, and when a user clicks, the event fires and we tell the browser what to do.

See the Pen Showing / hiding with jQuery by Phil on CodePen.

See the Pen Showing / hiding with jQuery by Phil on CodePen.

That works. But this style of coding where we tell the browser exactly what to do (imperative coding) quickly gets us in a mess. Imagine if we wanted to disable the button after it has been clicked, or wanted to change the background color of the page. We’d quickly get into some serious spaghetti code.

Developers have solved this issue by reaching for frameworks like Vue, Angular and React. These frameworks allow us to write cleaner code by utilizing the virtual DOM: a kind of mirror of the UI stored in the browser memory. The result is that when you ‘hide’ a DOM element (like a tab) in one of these frameworks; it doesn’t add a display:none; style attribute, but instead it literally disappears from the ‘real’ DOM.

This allows us to write more declarative code that is cleaner and easier to read. But this is at a cost. Typically, the bundle size of these frameworks is large and for those coming from a jQuery background, the learning curve feels incredibly steep. Especially when all you want to do is toggle tabs! And that is where Alpine.js steps in.

Like Vue and React, Alpine.js allows us to write declarative code but it uses the “real” DOM; amending the contents and attributes of the same nodes that you and I might edit when we crack open a text editor or dev-tools. As a result, you can lose the filesize, wizardry and cognitive-load of larger framework but retain the declarative programming methodology. And you get this with no bundler, no build process and no script tag. Just load 6kb of Alpine.js and you’re away!

Alpine.js

JQuery

Vue.js

React + React DOM

Coding style

Declarative

Imperative

Declarative

Declarative

Requires bundler

No

No

No

Yes

Filesize (GZipped, minified)

6.4kb

30kb

32kb

5kb + 36kb

Dev-Tools

No

No

Yes

Yes

When Should I Reach For Alpine?

For me, Alpine’s strength is in the ease of DOM manipulation. Think of those things you used out of the box with Bootstrap, Alpine.js is great for them. Examples would be:

Showing and hiding DOM nodes under certain conditions,
Binding user input,
Listening for events and altering the UI accordingly,
Appending classes.

You can also use Alpine.js for templating if your data is available in JSON, but let’s save that for another day.

When Should I Look Elsewhere?

If you’re fetching data, or need to carry out additional functions like validation or storing data, you should probably look elsewhere. Larger frameworks also come with dev-tools which can be invaluable when building larger UIs.

From jQuery To Vue To Alpine

Two years ago, Sarah Drasner posted an article on Smashing Magazine, “Replacing jQuery With Vue.js: No Build Step Necessary,” about how Vue could replace jQuery for many projects. That article started me on a journey which led me to use Vue almost every time I build a user interface. Today, we are going to recreate some of her examples with Alpine, which should illustrate its advantages over both jQuery and Vue in certain use cases.

Alpine’s syntax is almost entirely lifted from Vue.js. In total, there are 13 directives. We’ll cover most of them in the following examples.

Getting Started

Like Vue and jQuery, no build process is required. Unlike Vue, Alpine it initializes itself, so there’s no need to create a new instance. Just load Alpine and you’re good to go.

<script src=”https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.4/dist/alpine.js” defer></script>

The scope of any given component is declared using the x-data directive. This kicks things off and sets some default values if required:

<div x-data=”{ foo: ‘bar’ }”>…</div>

Capturing User Inputs

See section in Sarah Drasner’s article →

x-model allow us to keep any input element in sync with the values set using x-data. In the following example, we set the name value to an empty string (within the form tag). Using x-model, we bind this value to the input field. By using x-text, we inject the value into the innerText of the paragraph element.

See the Pen Capturing user input with Alpine.js by Phil on CodePen.

See the Pen Capturing user input with Alpine.js by Phil on CodePen.

This highlights the key differences with Alpine.js and both jQuery and Vue.js.

Updating the paragraph tag in jQuery would require us to listen for specific events (keyup?), explicitly identify the node we wish to update and the changes we wish to make. Alpine’s syntax on the other hand, just specifies what should happen. This is what is meant by declarative programming.

Updating the paragraph in Vue while simple, would require a new script tag:

new Vue({ el: ‘#app’, data: { name: ” } });

While this might not seem like the end of the world, it highlights the first major gain with Alpine. There is no context-switching. Everything is done right there in the HTML — no need for any additional JavaScript.

Click Events, Boolean Attributes And Toggling Classes

See section in Sarah Drasner’s article →

Like with Vue, : serves as a shorthand for x-bind (which binds attributes) and @ is shorthand for x-on (which indicates that Alpine should listen for events).

In the following example, we instantiate a new component using x-data, and set the default value of show to be false. When the button is clicked, we toggle the value of show. When this value is true, we instruct Alpine to append the aria-expanded attribute.

x-bind works differently for classes: we pass in object where the key is the class-name (active in our case) and the value is a boolean expression (show).

See the Pen Click Events, Boolean Attributes and Toggling Classes with Alpine.js by Phil on CodePen.

See the Pen Click Events, Boolean Attributes and Toggling Classes with Alpine.js by Phil on CodePen.

Hiding And Showing

See section in Sarah Drasner’s article →

The syntax showing and hiding is almost identical to Vue.

See the Pen Showing / hiding with Alpine.js by Phil on CodePen.

See the Pen Showing / hiding with Alpine.js by Phil on CodePen.

This will set a given DOM node to display:none. If you need to remove a DOM element completely, x-if can be used. However, because Alpine.js doesn’t use the Virtual DOM, x-if can only be used on a <template></template> (tag that wraps the element you wish to hide).

Magic Properties

In addition to the above directives, three Magic Properties provide some additional functionality. All of these will be familiar to anyone working in Vue.js.

$el fetches the root component (the thing with the x-data attribute);
$refs allows you to grab a DOM element;
$nextTick ensures expressions are only executed once Alpine has done its thing;
$event can be used to capture a nature browser event.

See the Pen Magic Properties by Phil on CodePen.

See the Pen Magic Properties by Phil on CodePen.

Let’s Build Something Useful

It’s time to build something for the real world. In the interests of brevity I’m going to use Bootstrap for styles, but use Alpine.js for all the JavaScript. The page we’re building is a simple landing page with a contact form displayed inside a modal that submits to some form handler and displays a nice success message. Just the sort of thing a client might ask for and expect pronto!

Initial view (Large preview)

Modal open (Large preview)

Success message (Large preview)

Note: You can view the original markup here.

To make this work, we could add jQuery and Bootstrap.js, but that is quite a bit of overhead for not a lot of functionality. We could probably write it in Vanilla JS, but who wants to do that? Let’s make it work with Alpine.js instead.

First, let’s set a scope and some initial values:

<body class=”text-center text-white bg-dark h-100 d-flex flex-column” x-data=”{ showModal: false, name: ”, email: ”, success: false }”>

Now, let’s make our button set the showModal value to true:

<button class=”btn btn-lg btn-secondary” @click=”showModal = true” >Get in touch</button>

When showModal is true, we need to display the modal and add some classes:

<div class=”modal fade text-dark” :class=”{ ‘show d-block’: showModal }” x-show=”showModal” role=”dialog”>

Let’s bind the input values to Alpine:

<input type=”text” class=”form-control” name=”name” x-model=”name” >
<input type=”email” class=”form-control” name=”email” x-model=”email” >

And disable the ‘Submit’ button, until those values are set:

<button type=”button” class=”btn btn-primary” :disabled=”!name || !email”>Submit</button>

Finally, let’s send data to some kind of asynchronous function, and hide the modal when we’re done:

<button type=”button” class=”btn btn-primary” :disabled=”!name || !email” @click=”submitForm({name: name, email: email}).then(() => {showModal = false; success= true;})”>Submit</button>

And that’s about it!

See the Pen Something useful built with Alpine.js by Phil on CodePen.

See the Pen Something useful built with Alpine.js by Phil on CodePen.

Just Enough JavaScript

When building websites, I’m increasingly trying to ask myself what would be “just enough JavaScript”? When building a sophisticated web application, that might well be React. But when building a marketing site, or something similar, Alpine.js feels like enough. (And even if it’s not, given the similar syntax, switching to Vue.js takes no time at all).

It’s incredibly easy to use (especially if you’ve never used VueJS). It’s tiny (< 6kb gzipped). And it means no more context switching between HTML and JavaScript files.

There are more advanced features that aren’t included in this article and Caleb is constantly adding new features. If you want to find out more, take a look at the official docs on Github.

(ra, il)

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/LuebWSaeoQQ/how-to-design-the-perfect-sticker-for-your-brand

Stickers are one of the many tools you can use to increase brand awareness. They’re cost-effective and get your name out there – wherever you want. To make the perfect sticker for your brand, you need to think about what it’s for, and where it’s going to be used. Then you can figure out the […]

The post How to design the perfect sticker for your brand appeared first on designrfix.com.

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/mKScGYmRc50/twitter-fleets

Twitter has started testing its own version of Stories – Fleets. These fleeting tweets disappear after 24 hours, bringing Twitter in line with other apps that have a disappearing Story feature – namely Snapchat, Facebook and Instagram. Fleets will be primarily text-based, but can include videos, GIFs or photos.

The feature is currently being tested in Brazil and may be rolled out across the rest of the world depending on user feedback. Unlike with normal tweets, users won't be able to retweet, like or comment on a Fleet, although they will be able to send a DM or emoji. Twitter hopes that those who normally feel that tweeting is too public feel more comfortable with Fleeting (we're not sure it's a capitalised verb yet, but we'll go with it).

On the day after the announcement, Fleets are already trending on Twitter, but perhaps not in the way Twitter anticipated. The hashtag #RIPTwitter has taken off, with people posting various savage memes about how they don't want Twitter Stories. We can't say yet just how fleeting this anger will be. 

For a social media trick that's available right now, read our post on how to change the font in your Instagram bio.

Do we really need Twitter Stories (sorry, we mean, Fleets)? Well, the answer is of course, no. But that doesn't mean that Fleets won't take off, and we do love the name. However, Fleets may end up being one of those features that most people basically ignore – a bit like Instagram TV or Facebook Watch (yes, we had to look that one up), and not at all like Instagram Dark Mode, which everyone seems to love.

From a content creator's point of view, Fleets will either be another way to reach your audience, or another way for your audience to ignore you. The addition of Fleets could also mean that people will stop scrolling through other users' Twitter feeds in an attempt to find something racist, or offensive to call them out on. Might there be an increase in screenshots, perhaps?

All potentially offensive views – okay, all views – can now have their own disappearing platform, just like they do on other social media networks. We can only imagine what politicians will do with these Fleets if they do eventually roll out across the globe. Just imagine the press briefings. 

You can read the blog announcement from Twitter here (in Portuguese).

Read more:

10 must-know Instagram tips for creativesDisney character 3D fossils are strangely adorableEverybody hates new Twitter

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/WotKyDi9X0Q/the-objective-of-a-profitable-email-marketing-campaign

Email marketers are in a never-ending quest to send emails that have a great impact and produce tremendous results. They tirelessly design the excellent message and fine-tune tactics for breaking through inbox clutter. Then they scrutinize results for ideas on how to improve in the next round.  However, no matter how much is learned in […]

The post The Objective of a Profitable Email Marketing Campaign appeared first on designrfix.com.

Original Source: https://www.smashingmagazine.com/2020/03/css4-pros-cons-discussion/

Why Are We Talking About CSS4?

Why Are We Talking About CSS4?

Rachel Andrew

2020-03-04T11:30:00+00:00
2020-03-04T13:07:05+00:00

There has been some discussion recently about whether there should be a CSS4, as in a defined “next version” of CSS. In this article, I take a look at the discussions around this, the pros and cons of creating a feature release for CSS, and the potential problems in deciding what goes into it.

I’m using the term CSS4 as that is how the discussion was started, and not attempting to discuss what the naming should actually be, should this approach be taken forward. Bikeshedding naming is an excellent distraction from the discussion of whether we should do this at all, so I will use CSS4 as a placeholder for the version of CSS we are proposing to define, and CSS5 for the next one along the line.

The Issue

A discussion around whether we should define a CSS4 has been raised in the community, and Jen Simmons then raised a CSS Working Group issue which neatly rounds up some of that existing debate. Outside of the actual issue that we are discussing, it is fantastic to see so many people who are not part of the CSS WG replying on this thread, and I hope that having commented once, people will be happy to come and comment on some of our other issues.

In order to understand why there is no CSS4, we need to look at a little bit of web platform history. The initial versions of CSS were as a single, monolithic specification. These specifications contained every possible CSS property and value. This worked well as there wasn’t a lot of CSS to detail. CSS1 mostly covered features for formatting text documents, additional features and clarifications were added to CSS2 and CSS2.1 however CSS was still a relatively small specification.

CSS3

At the point the CSS Working Group began work on CSS3, it was decided to split the big spec into modules. These modules would each cover part of CSS. Not all of CSS was immediately placed into a new module. Many things remained defined in CSS2.1 as there were no changes or additions to them. For this reason, you will still find links to the CSS2 specification in modern modules, if the thing that is being referenced is still defined in CSS2. However, any new CSS is created in separate modules. This modularization continues today as new CSS is being created. For example, several of the features that make up the Box Alignment specification initially started life in the Flexbox spec. Once it became apparent that they could apply to other layout methods such as Grid Layout, they were moved into a new module to be defined for that other method too.

We stopped referring to new specifications as CSS3 Specifications, partly because it didn’t make a lot of sense. The way that modules are versioned is that the modules which were a progression of CSS2, for example Selectors, became a Level 3 module. Brand new CSS, for example CSS Grid Layout, did not exist at all in CSS2 and so start life as a Level 1 module. Some of those initial modules are now at Level 4 or even Level 5. Therefore, calling all new CSS CSS3 doesn’t map to the level numbers anymore, and is potentially rather confusing.

Specification Maturity Levels

In addition to specification levels, each individual level goes through a staged process from the initial draft to becoming a W3C Recommendation, the steps in the process are referred to as Maturity Levels. A W3C Recommendation is what you might think of as a “web standard”, however many of the things we use daily in our work are defined in specifications that are not at that maturity level yet. You can see the list of specifications and their status on the CSS WG Current Work page.

Explaining The Missing CSS4

Many of us involved with the process saw the confusion about CSS3 or the apparent lack of progress to CSS4 and began to write articles, post videos, and try to help people understand a bit about how the process actually worked. That said, while it was important to share this information so that people teaching CSS would explain it correctly, I am not sure how much this information matters to the average web developer. What level a specification is at, or the internal W3C process of specification maturity, is far less important to a web developer than the issue of what CSS can actually be used in browsers.

“There Is No Such Thing As CSS4,” Tab Atkins-Bittner
“Why There Is No CSS4: Explaining CSS Levels,” Rachel Andrew
“Where Is CSS4? When Is It Coming Out?,” Layout Land (video)

What Are The Benefits Of Versioning CSS?

Looking through the responses to the issue, and the discussion around the web, there are certainly some potential benefits of having a clear version number for CSS.

As a writer of books and a producer of educational materials, I would probably benefit from CSS version numbers. It’s an excuse to publish an updated book that covers the latest and greatest version of CSS. On the other side of that, it is a way for the purchasers of books and courses to be sure that what they are buying is reasonably up to date – although the publishing date is arguably a better indication of that than anything else.

One thing we did lose by moving away from a version number of all of CSS, was the ability to do something like the Acid Test. The Acid 1 Test tested for support of CSS1, Acid 2 for support of CSS2.1. These tests were reasonably well known and seen as a good benchmark for browser support of web standards. A version 3 test was developed, however, it tested for a range of features and was less tightly tied to the Level 3 CSS Modules than previous tests had been to CSS1 and 2.1. A definite line drawn around a set of features would allow for user agents to declare their level of support for those features.

Some commenters on the issue have mentioned that a version would allow them to push for dropping of older browser versions because they “don’t support CSS4”.

“[…] perhaps CSS4 could help to push their mindset towards a more secure and better web. During pitch meeting, it’s hard to tell them we can’t support IE10 because we want CSS Variables and Grid Layout. Stakeholders do not know and do not care. They just want to support as many browsers as they could (very typical FOMO mindset) and they have the dollars to throw.

However, if we could tell them we can’t support IE10 because it doesn’t have the latest CSS4 technology and throw them the “Are you sure you want your newly created website to be behind your competitors because of that?” question, that might ponder them (of course, on top of the fact that IE10 is completely obsolete and vulnerable).”

There is an argument that defining a version gives developers a clear set of things to learn. In opening the issue on the CSS WG Jen Simmons said,

“I see a lot of resistance to learning the CSS that came after CSS3. People are tired and overwhelmed. They feel like they’ll never learn it all, never catch up, so why try, or why try now? If the CSSWG can draw a line around the never-ending pile of new, and say ‘Here, this. This part is ready. This part is done. This part is what you should take the time to learn. You can do this. It’s not infinite.’ I believe that will help tremendously.”

What Are The Problems Of Versioning CSS?

The first issue is that any collection of “ready for the primetime” CSS, is not as straightforward as selecting a set of specifications. Many specifications are partially implemented, with great support for some properties and none for others. There are features which many web developers would see as mature, sat in specifications still at Working Draft status alongside features which are still being debated and clarified in the Working Group.

If we take Multiple-column Layout as an example. The majority of properties have had widespread browser implementation for many years. However, the column-span property has only recently been implemented in Firefox, and there are a number of features that have recently been clarified, such as column-fill.

We could decide to ignore specifications altogether and look at properties. That isn’t straightforward either due to the fact that we have partial implementations across layout methods. The Box Alignment Properties are an excellent example. These are defined for all layout methods, where the property makes sense in that layout method. However support for Box Alignment is currently only seen in Grid and Flexbox. Therefore is justify-self, which is defined for block-level boxes, absolutely-positioned boxes, and grid items stable? Yes in a Grid context, no in a Block Layout context.

Box Sizing is another area, we have support for the intrinsic sizing value fit-content() in CSS Grid Layout for track sizing, yet not as a value for width. Then, none of the intrinsic sizing keywords are implemented for flex-basis by browsers other than Firefox.

Finally, if we return to multicol, many of the problems people have with multicol are nothing to do with the properties themselves, but are to do with poor support of fragmentation across browsers. This makes multicol seem to behave badly despite there being excellent support of the various properties. Disentangling all of these dependencies to come up with a set of features is going to be quite a difficult job.

CSS Is Not Just For Web Browsers

As I and one other commenter have mentioned, CSS is not just for web browsers. There are a whole raft of user agents that take CSS and HTML and output printed documents by way of creating a print-ready PDF. They typically have excellent support for the Paged Media specification, fragmentation and so on. However, they often lag behind browsers in terms of implementing newer CSS, for example Grid Layout. How do they fit into CSS4?

People Expect A Feature Release To Include Currently Non-Existent Features

Something interesting that has happened in the discussion on the issue, is that a number of people have commented saying that their expectations of a CSS4 are that it would contain certain features that are not yet part of CSS at all. Joshua Lindquist, in his excellent roundup of the comments notes that,

“When discussing authors that do not keep up with the latest developments, I think this approach will be simple to understand. Everything will feel like it’s brand new to them, even though some of these features, like Grid and Flexbox, have been in browsers for years.

But anyone who does keep up will likely be confused about why there is a ‘new’ specification full of things that are actually old.”

Who Would Decide What Makes The Cut?

Given the fact that the features that would make up CSS4 are not completely straightforward, someone is going to have to make the decision as to what is included.

The CSS Working Group has criteria for stability via the Maturity Levels already discussed. Once a spec has two implementations of each feature it can progress from Candidate Recommendation Status to become a Recommendation. However, as detailed above, it can take some time for that to happen, and while we are waiting for some features in a spec to have implementations, other may have widespread and stable browser support. If we were to say that CSS4 was only those specifications that were at Recommendation Status it would include:

CSS Color Level 3
CSS Namespaces
Selectors Level 3
CSS Level 2 Revision 1
Media Queries
CSS Style Attributes
CSS Fonts Level 3
CSS Writing Modes Level 3
CSS Basic User Interface Level 3
CSS Containment Level 1

So, no Grid, Flexbox, Box Alignment, and many more specifications that most of us are using.

If we are going to define a version of CSS, that is separate to the existing specification levels and maturity that we already have as part of the W3C process, then there needs to be a group with the time and resources to work on this. That group not only needs to define CSS4, but needs to do that as part of developing a framework to make these decisions this time, and for the next n versions of CSS. Otherwise, we will be having this discussion again in another two years, about the fact that no-one has shipped CSS5. I don’t believe the CSS Working Group is the right venue for that, even if only that there is other work that the WG needs to be doing to actually develop and define new CSS. There are already more jobs to be done than we have time to do. In addition, having another consideration when working on specifications will make decisions around each spec harder. Currently, we have situations where parts of a spec are marked as at-risk if their inclusion might prevent the spec from progressing to a Recommendation. It was for this reason that subgrid was bumped to Level 2 of Grid. If we have this additional level of abstraction, which doesn’t really fit into the process, will this just be another thing to consider and thus delay work on specifications?

What Problem Are We Trying To Solve?

In many of the responses to this issue, web developers brought up browser support as being key to what should be included in a CSS4, and I think that the issue we face is less one of CSS versioning and more of web developers being clear as to which collection of features should generally be considered usable in their projects.

“One of the advantages of a CSS4 approach is that it signals two things. First, that there’s a significant bundle of new CSS features that have been developed after CSS3 and which are ready for use and second, that they are ready for use. Not experimental or implemented by Chrome but no one else, but ready for broad adoption.”

— Rick Gregory

The fact that browser support comes up so frequently in this discussion makes me wonder if a better place to be defining this would be somewhere like MDN. MDN is already contributed to by all browser vendors, it already has support data for these features in a way that allows us to see partial implementations of things like Box Alignment. MDN is the documentation for the web platform, so we could sidestep the issue of print implementations, or any other implementations of CSS, scoping the feature set to the web alone.

I remain unconvinced that a CSS4, or whatever we choose to call a version of CSS, will actually make any difference to the perception of CSS outside of a relatively small community. Nor do I think it will help to solve the problems that web developers have in terms of convincing their bosses and clients to upgrade browsers. If Microsoft, who provides the software, is telling companies to upgrade and companies are not upgrading, I fail to see what the carrot of supporting CSS4 will do. And, I’ve been doing this a long time and know that back when we did have versions of CSS, people still didn’t upgrade their browsers. However, I think it will make it easier to talk about a particular chunk of functionality in a less abstract way, but I think that it needs to happen outside of the CSS Working Group and the specification process, and be based on what is usable as opposed to what is well specified.

“However, I must agree with several others that major marketing versions only have meaning in a compatibility situation. If we announce that CSS5 is finally here, it must mean all major browsers have full or near-full support.

Without this compatibility condition met, I think some developers will be cynical, and return to feature or module based thinking, the current status quo.”

— Ferdy Christant

What Do You Think?

I wanted to bring the discussion to Smashing Magazine as I think that many of our readers won’t have noticed this discussion. I’d be interested in what you think. Are there ways in which declaring a version of CSS would help you, that I haven’t mentioned here? Would checking to see what was in this version be something you would do, or would you be more inclined to check Can I Use, or MDN to find out what is supported? Do you think the average web developer cares about this stuff? Let us know in the comments, post to the original issue, or join the new Community Group set up to discuss this.

(il)