this is rachelandrew.co.ukhttp://rachelandrew.co.uk/archives
Blog of Rachel Andrew, web developer, writer and public speakerCSS Grid One Year Onhttps://www.rachelandrew.co.uk/archives/2018/03/07/css-grid-one-year-on/
https://www.rachelandrew.co.uk/archives/2018/03/07/css-grid-one-year-on/A year ago today, Firefox was the first browser to ship into stable their CSS Grid implementation. Closely followed by Chrome and Safari. It’s been quite a year for my favourite layout method.

It has been fascinating to see how people have adopted Grid, and the different ways people are developing with the specification. It has also been interesting to me to discover the things people want to do, suggestions for future levels of the Grid specification; or perhaps that point to other types of layout entirely being required. The suggestions that you raise against the specification are heard, please keep adding them. New CSS does not appear overnight, but the CSS WG does listen and take these ideas into account. The first requirement to tackle for Grid is the subgrid feature, and a First Public Working Draft of the Level 2 specification is now published, it will focus on defining subgrid.

As I’ve continued to speak, and increasingly lead workshops about Grid, I’ve begun transforming the way I teach the subject. Simply focusing on Grid - which is often what conference and workshop organisers ask for - essentially leads to the assumption that this is one layout method to rule them all. It is impossible to teach grid without talking about CSS Intrinsic and Extrinsic Sizing, Writing Modes and Box Alignment. It would be wrong to teach Grid without explaining how it and Flexbox are solutions to different problems. The number of attempts I have seen where a developer is trying to reinvent multi-column layout, or even floats in Grid demonstrates to me how much a holistic programme of learning about layout is needed. As I say in many of my talks as I demonstrate how some “old CSS” solves a problem, “don’t forget that old CSS is still useful for what is was designed for.”

Teaching this new layout, has also demonstrated to me how a real understanding of these other specifications is becoming increasingly important. It isn’t just a case of knowing which layout method to use, it is understanding the underlying concepts well enough not to be baffled by them. In particular, once we get away from sizing everything in percentages, take advantage of the flexibility of the fr unit in grid or the flex properties in flexbox, we have to understand how the browser is working out how big things are. It is far easier to understand why we align things to the start and end of containers rather than top, right, bottom and left once you understand that Writing Modes exist, and why.

In my book The New CSS Layout I bring together all of the parts of layout, I’m increasingly doing that on stage and in workshops. My online CSS Workshop covers all of CSS Layout in depth. I’ve also begun publishing articles that look at how different parts of CSS work with Grid - covering Sizing, Generated Content, and also things like the concept of a Block Formatting Context. I hope to continue with this approach over the next year, because there will be new people coming into the profession now who do not have the baggage that us old hands have. They get the chance to learn how layout on the web works, with real tools that will enable their creativity. Without battling floats or needing to rely on frameworks they can hopefully be better placed to deal with the important jobs of developing performant and accessible websites. I can’t wait until we no longer need to explain how floats can be used for grid-type layouts, and I expect my slide decks will be starting to document that transition over the next year or so.

I am writing this post in LA, over the past two days I have taught layout and new CSS to an audience of designers. I have enjoyed hearing from them how these new possibilities spark a renewed interest in design for the web. I hope that in the next year we start to see some of that creativity come through, and we can figure out exactly what is possible now, and what we want to be possible next.

]]>
Wed, 07 Mar 2018 17:20:00 +0000Weeknotes 5https://www.rachelandrew.co.uk/archives/2018/02/12/weeknotes-5/
https://www.rachelandrew.co.uk/archives/2018/02/12/weeknotes-5/
First conference of 2018 was Smashing Conference in London. I had a new talk to present and was also doing a one day workshop. I find workshops exhausting, although I love the immediate feedback and the chance to see people get concepts right there in the room.

Live Examples for MDN

I’m currently adding live examples to various properties over at MDN. This week I did the Flexbox examples, such as this one for flex-basis. The aim is to have a live example for each CSS property, to help people see quickly how the property works.

Other things

Not much time for other things this week as I was in London all week. Before heading there I did manage to get my first flying lesson of the year. All previous attempts through January have been cancelled due to weather. It wasn’t as disastrous as I had feared with over two months of not flying, though I still feel completely overloaded most of the time.

London was bright and cold so I got a fun touristy daybreak run in around Tower Bridge and St Paul’s Cathedral. I can’t run over Tower Bridge without thinking of it as the halfway point in the London Marathon. After heading back from London I did race 4 in the Bath Skyline series, the muddiest one yet!

]]>
Mon, 12 Feb 2018 08:51:00 +0000Weeknotes 4https://www.rachelandrew.co.uk/archives/2018/02/05/weeknotes-4/
https://www.rachelandrew.co.uk/archives/2018/02/05/weeknotes-4/
Slides, slides and more slides. That really is what I’ve been working on this week, getting all these talks and workshops sorted out. I’ve also written three, as yet unpublished articles, and started work on some examples for the MDN Web Docs.

Ran over 30 miles this week, half of that as a long run on Sunday. Marathon training continues. Next week I’m at Smashing Conf, London so I’m going to take the chance to have a bit of a recovery week and do shorter runs.

CSS Working Group

At the tele-conference it was resolved to publish Level 2 of the CSS Grid Specification. The main focus will be the subgrid feature.

CSS Layout News

Global Diversity Call for Papers Day

I had volunteered to mentor at Global Diversity CfP Day, which aims to get more people submitting to call for papers for conferences. It was a really fun day, I met some lovely people and I hope my comments and ideas were in some way helpful. It was also really good fun to see reports coming in from all over the world, I’d not left home for the Bristol event when events in Australia were posting to the Slack group to say they were all done!

I’m going to be writing a round-up post for Smashing Magazine to cover the day and also share some of the resources used, to help more people get started with conference speaking.

Smashing Magazine

Something for everyone on Smashing this week. If you don’t see content you want to read on Smashing, I’d love to know what you would like to see. We have a content suggestions board for your ideas and votes.

]]>
Mon, 05 Feb 2018 16:58:00 +0000Weeknotes 3https://www.rachelandrew.co.uk/archives/2018/01/28/weeknotes-3/
https://www.rachelandrew.co.uk/archives/2018/01/28/weeknotes-3/
I am well into conference preparation now. Smashing Conf London is just over a week away, and I’ll be presenting a new talk and updated CSS Layout workshop. I’m also working on a new talk for designers on Grid and other new layout methods. I’ll be presenting that at UX Immersion: Interactions.

CSS Working Group

Due to the fact opinion is split Edge have decided to align their implementation with Chrome and Safari, as have Firefox. This ensures that existing sites do not break, and we get interoperable behaviour. Lots of interesting things have come out of the discussion however, including thoughts on better ways to handle the aspect ratio issues and the “padding hack” enabled by the behaviour in Chrome and Safari.

Smashing Magazine articles

Another nice week of articles on Smashing Magazine, I read every article that we publish and we’ve got more great stuff coming up soon.

Other things

The weather in Bristol is still preventing flying lessons, and also making marathon training a rather cold and damp affair. In addition to running a lot, I’ve been at CrossFit and also swimming, which at least gets me away from the computers for a while.

]]>
Sun, 28 Jan 2018 20:23:00 +0000Weeknotes 2https://www.rachelandrew.co.uk/archives/2018/01/20/weeknotes-2/
https://www.rachelandrew.co.uk/archives/2018/01/20/weeknotes-2/
This week Widget the cat had to go to the vet hospital for an operation. He is home now, quite angry at us, but seems to be a lot better than he was before the op. No flying lessons due to the continued suboptimal weather, but I’ve been to Cross Fit twice and run a not insignificant number of miles in marathon training. Related, most bits of me hurt.

How big is that box?

I made a little video about the intrinsic, content-sizing keywords and how they are used to size Grid Tracks.

CSS Layout News

I published CSS Layout News Issue 129, which has a pretty great roundup of links. It’s great to see so many people writing and thinking about CSS layout.

Safari Online Training

Every so often I spend a couple of hours talking to my computer (and 100 or so attendees) for the Safari Online Training series. My recent session was this Friday, I have another coming up in February.

A Book Apart

As yet unreleased things

I recorded a podcast episode, worked on my talk for The London Smashing Conference, and completed the second draft of my chapter for The Smashing Book 6.

Lots and lots of conference email, plenty of exciting trips and events planned. I’ll add them to my speaking page as they are announced.

Smashing Magazine

In addition to my article, on Smashing Magazine this week we published the following articles. I’m really happy with some of the content currently coming through our publishing process. I get to read everything, and we have some excellent stuff lined up.

Sad news

There was sad news this week of the death of Dean Allen. I can’t claim Dean as a friend, he was someone that Drew knew far better than I did. However the one time we met in person left an impression on me, enough to know that I wish I’d had the chance to know him better. At the time we met, my daughter was maybe 9 or so, she came with us to dinner. Dean spoke to her as a peer, listened to her, involved her in the conversation and enthralled her with his stories. We lost a good person this week. His impact on the web reaches far, can be found in the many stories that are starting to be told, the remembrances on Twitter. RIP Dean Cameron Allen.

]]>
Sat, 20 Jan 2018 16:25:00 +0000Weeknotes 1https://www.rachelandrew.co.uk/archives/2018/01/12/weeknotes-1/
https://www.rachelandrew.co.uk/archives/2018/01/12/weeknotes-1/
I have something of a tendency to do stuff and move on, straight into whatever is next. I thought in 2018 I would have a bit of an experiment and write these weekly notes. Here is the first one, covering a little more than a week due to the weird Christmas getting back to work thing that happens.

MDN Flexbox Guides

Before Christmas I finished the work I had been doing on the guides for Flexbox over at MDN. I wrapped all that up with a blog post introducing the guides. MDN is the place I use for reference, so I’m very happy to be able to contribute to the Grid and Flexbox references.

The Pursuit Podcast

The Pastry Box returns

Some of my personal favourites in terms of things I have written were on previous seasons of The Pastry Box, so when I was asked to be part of the 2018 season I jumped at the chance. You can expect some non-technical writing from me over there, and my first post is about Starting Over.

Perch and Runway updates

Out this week is a new update to Perch and Perch Runway, Drew also published the first of some new video we are doing for Runway which you can watch here.

Notist update

Drew and I are working on a new project for public speakers called Notist. That is coming along nicely and I’ve been working on some of the CSS for forms and other UI bits and bobs.

Planning CSS Workshop revisions

I have a number of in-person workshops booked in already this year, plus a new workshop aimed at designers and UX professionals on all that is new in CSS Layout.

Much of that material is also published in my online workshop. This week I planned out the revisions and additions to that material. Existing subscribers to the online workshop will be getting all those updates as they come out.

Smashing Magazine

At Smashing Magazine we’ve been moving the editorial workflow from Trello to a new tool called Notion. There are always some teething pains to work out moving to a new tool, but Notion is really good and allows much more structure than we could have with Trello. It’s essentially a wiki, just not a terrible one!

The team published some excellent articles since the beginning of January, covering a huge range of subjects:

Upcoming conferences

I already had a pretty busy speaking schedule lined up for 2018 by the end of last year, now we are well into January I’m getting a lot of email about my availability, which is a finite thing until I work out how to clone myself. This all means if you are thinking of asking me to come speak, run a workshop or similar doing so sooner rather than later would be a good thing!

All the rest

I’m writing a chapter for the Smashing Book 6, and submitted my first draft this week. CSS Layout News 128 went out. I’ve been working on a new section of this site to pull together all my CSS work, hopefully get that live next week. There was an epic (and still ongoing) thread on Twitter, which highlighted how many of the women who were fundamental in the early web have been almost forgotten. I’m glad that this thread highlighted those names and many others I didn’t know about.

I’ve also been doing the quarterly accounts, having all of the fun of the VAT Return, the EC Sales List and the VAT MOSS mini one-stop shop. Got to make sure Slovakia get the 60p we owe them.

The weather in Bristol has been shocking, so no flying lessons but I’ve been out for various damp runs. I’ll leave you with a photo from Thursday morning of local tall ship The Matthew, out of the water in the dock at Underfall Yard, spotted while on my run.

]]>
Fri, 12 Jan 2018 14:47:00 +0000So that was 2017https://www.rachelandrew.co.uk/archives/2018/01/01/so-that-was-2017/
https://www.rachelandrew.co.uk/archives/2018/01/01/so-that-was-2017/
Time for another of these roundup posts where I look back, baffled at how quickly time has passed.

TripIt tells me that I spent 158 days on the road last year, visiting 56 cities in 16 countries and travelled 184,988 km. That did include a holiday in Nice, but otherwise my travel was conference or CSS Working Group related. I also got to attend Google I/O which I enjoyed far more than I had imagined I would. A huge thank you to all the conference organisers who have invited me to share my thoughts about CSS on their stages, and the attendees who have listened, and asked great questions that will inform what I do next.

Newcastle upon Tyne for Frontend NE

Lisbon, Portugal for the Netcentric Summit

Oxford, UK for Render Conf

Seattle, Boston, Washington DC, Chicago, San Francisco and Denver for An Event Apart

San Francisco, USA and Freiburg, Germany for Smashing Conf

San Francisco for Google I/O

CSS Working Group meetings in Seattle, Paris, San Francisco and Tokyo

Reading, UK for the Breaking Borders meet up

Berlin, Germany for CSSConfEU

Athens, Greece for Frontend United

Amsterdam, The Netherlands for CSS Day

San Jose, USA for Fluent

Brighton, UK for Patterns Day

Rovinj, Croatia for Web Summer Camp

Krakow, Poland for the GDE Summit

Stockholm, Sweden for NordicJS

Toronto, Canada for Web Unleashed

Dublin, Ireland for 404.ie

Braga, Portugal for MirrorConf

Bochum, Germany for RuhrJS

Nantes, France for DevFest Nantes

London for Mozilla View Source and also for Google Developer Group DevFest London

CSS Grid shipped

Having been wandering the globe talking about CSS Grid for almost five years, Grid finally shipped in browsers in 2017. This was good, as I didn’t really want to be some kind of CSS vapourware lady. I knew Grid was important the first time I read the initial spec. I had no idea how my championing of the specification would change my life, and allow me to get to work with so many interesting people.

There is so much I could link to from this year relating to CSS Grid, here are some personal highlights.

When Firefox, Chrome and Safari all shipped Grid within a couple of weeks in March.

At An Event Apart in Seattle, when Rossen Atanassov pulled up a slide of an email from me in 2014, when I’d been chasing up Microsoft to update their grid implementation.

My work was mentioned at both the Google Developers Experts Summit, and Chrome Dev Summit.

What has been fantastic is that the community has, in the most part, given credit to the work that Jen Simmons and I have been doing to promote Grid, and layout in CSS. As have people from the various browser vendors. I don’t do this stuff to be internet famous, however recognition means I can get work that pays the bills and therefore continue to work on CSS. I can continue to create learning materials, and show up at community conferences and everything else I do as an independent person who cares about the web.

If you’ve shared my stuff or remembered to reference my work when writing about Grid, thank you. It means a lot.

Multi-column Layout

My main interest in CSS is layout, both for the web and also for print and EPUB. Which meant that reviving work on the Multi-Column layout specification was entirely relevant to my interests. We republished the specification as a Working Draft, in order to work through and fix the outstanding issues, leading Drew to suggest I was regressing the web. I have a lot to learn as a spec editor, but I am enjoying doing so.

As part of this work I’ve been learning how to write tests for Web Platform Tests, I wrote about that for 24 ways this year, as working on tests is a brilliant way to start contributing in a meaningful way to the platform.

Book no.22 - The New CSS Layout

I wrote another book, and in October it was published by the lovely folk at A Book Apart. The feedback has been amazing. I really wanted to place Grid and Flexbox into the overall picture of layout in CSS. To explain where we came from, and where we are heading.

Smashing Magazine

From November 1st I’ve been the Editor in Chief of Smashing Magazine. I landed there right in the middle of their major site relaunch, and I feel as if I’m still finding my feet. We have some fantastic content coming your way in 2018 - I know because I read all of it! I’m very keen to help make Smashing the best place for practical content for web developers, stuff that helps you to do you job better.

Shipping Perch and Runway 3

Drew and I shipped a major update to our products in 2017 - Perch and Perch Runway 3 launched in March. We also went to making a free download available for testing for the first time, and it has been fantastic to see new people discover the products for the first time.

We’re especially keen on the Perch Runway Headless CMS mode, and the Webmention functionality we’ve also added this year.

Announcing Notist

In addition to Perch and Runway we’ve been working on a brand new product. Notist aims to be a hub for your speaking events, and the resources that go along with them. We announced in the last part of 2017 and we’ll be launching very soon.

We’ve added the ability to import your Lanyrd data in preparation for launch. You can read about that here.

CSS Layout News

I’ve continued to send my weekly CSS Layout News email. Tomorrow will be Issue 127 and there are now over 7,800 subscribers. I’ve had some lovely sponsors this year, who have helped with the cost of sending out the email.

Not all work

Work and life have always merged into one thing for me, and quite purposely. I’m doing the things I want to be doing, that I find important, and along the way trying to find ways to make a living out of it. I have lots of things I like to be doing that don’t involve running a business, writing code or CSS specifications.

Running

I’ve had something of a disastrous year as a runner. At the end of 2016 I had more surgery on my elbow, which has given me back use of my right hand and a lot less pain. However the problems caused by one wonky arm have plagued me all year as I have bounced between hip and ankle injuries caused by how much out of alignment things are. In the final weeks of 2017, things seem to be improving, I’ve started CrossFit, wonky arm and all, and I’m hoping to be fit and well to run the Berlin Marathon in 2018 as I’ve got a ballot place. Berlin is my favourite city in the world, doing the marathon there will be amazing.

I did get to do my 100th Parkrun. Drew and I managed to sync up our progress so we could run our 100s together at Ashton Court. In addition to parkruns close to home I did my first Canadian parkrun, with Drew at Beach Strip in Toronto, revisited Crissy Field in San Francisco, and visited Waterstown in Dublin.

An “empty nest”

My daughter graduated from college this year, we didn’t get to do the whole graduation thing as she was already working as a performer in Bulgaria. She has been working ever since, and we’ve just enjoyed Christmas together after she finished a run playing Cinderella in Wales. She went away to college at 16, so her not being around all of the time is fairly usual. However, she is now independent of us, doing her own thing, exactly as it should be.

I’m glad that she still wants to hang around with us. That we’ve come out the other side as close friends, which makes it almost more sad she lives in another city! However I’m grateful for the fact that via Instagram, or Facebook and Twitter we can share our lives.

Learning to fly

For the last 12 years, any spare money I had was being directed into school and then college fees for my daughter. I’ve not had the chance to indulge any hobby of my own that cost money. The aforementioned empty nest means that I can for the first time spend a bit of money on fulfilling a dream of my own, and so I’ve started to train for my Pilot’s License. It is the hardest thing I have ever tried to do, but that just makes it more appealing as far as I’m concerned. I’m currently “on the circuit”, until I can safely land the Cessna 150. My landings are best described right now as interesting, and no-one wants an interesting landing!

I did set up a Slack for people who fly or who are interested in flying. Sign up here.

2018

Goals for 2018? To get Notist launched, and also to promote Perch Runway more to people who didn’t already use Perch.

To bring together the work I’ve been doing on CSS into one place. I’ve got some lovely illustration that I haven’t quite had chance to implement yet, as part of an effort to combine a lot of the stuff I’m doing. That’s a pretty immediate goal - I’d hoped to do it over Christmas but the need to move our server infrastructure to Germany while things were quiet took precedence!

To get the outstanding issues in the Multi-column Layout spec tidied up, with a solid test suite.

To update my online CSS Workshop with the new material I have. I need to spend a week recording video. It’ll all be available to existing subscribers too.

To progress towards my Pilot’s License. I’d love to think I could get it in 2018, however the weather and my travel schedule might mean it takes longer, which is fine. The aim is to be a safe pilot, not to finish in the minimum number of hours. I’d love to get all the written exams out of the way though.

To work on some tough but realistic fitness goals as I continue to work to sort out the mess my elbow has caused.

To enjoy the speaking engagements I’ve already lined up this year. I’m already doing my new An Event Apart talk, and I have a few new things to talk about this year at the various events I’ve been invited to.

Happy 2018.

]]>
Mon, 01 Jan 2018 15:16:00 +0000How should we resolve percentage margins and padding on grid and flex items?https://www.rachelandrew.co.uk/archives/2017/12/20/how-should-we-resolve-percentage-margins-and-padding-on-grid-and-flex-items/
https://www.rachelandrew.co.uk/archives/2017/12/20/how-should-we-resolve-percentage-margins-and-padding-on-grid-and-flex-items/
The CSS Working Group would like your opinion. There is a longstanding issue in both the CSS Grid Layout and Flexbox specifications.

Percentage margins and paddings on grid items can be resolved against either:

their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,

the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended to require that.

Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers.

What is the problem here?

A percentage has to be resolved against something. If you give a grid item a margin-right of 10%, you would probably expect that 10% to be calculated as 10% of the width of the grid area. What happens however if you give the item a margin-bottom of 50%? Do you expect it to resolve to 50% of the total height of the grid area or do you expect it to calculate 50% from the width? The spec allows for both, and browser implementations are split.

You can see the problem in this very simple CodePen. We have three column tracks which are each 120 pixels in width. The margin-right applied to each track resolves to 12 pixels, 10% of 120.
In Chrome and Safari the margin-bottom resolves to 60 pixels. 50% of the width of 120 pixels is 60 pixels.

In Firefox and Edge the margin-bottom uses the height of the grid area and so in this case resolves to 150 pixels as I have put a height on the grid and items are stretching.
If you remove the height on the grid container you will see how Firefox now completely collapses the container as there is now no height to resolve against. Chrome will keep the container at 60 pixels - that being the margin.

We see the same variance in Flexbox, however in Flexbox we resolve against the flex container as the containing block. However you can see in the below example how Chrome uses 10% of 500 pixels for the margin-right, and 50% of 500 pixels for margin-bottom. Firefox uses 10% of 500 pixels for margin-right and 50% of 300 pixels for margin-bottom.

The fact that percentages resolve from the width is essentially a throwback to the old days of layout on the web where we didn’t have great control over the height of things. The width was the measurement we could control and so became the dominant measurement.

However, perhaps a better solution is to properly solve the aspect ratio issue, while also deciding on one solution for margins and padding in general.

We want your feedback!

The CSS Working Group would love to know your thoughts on this issue. As you can see above this is not an issue when using horizontal percentage margins and padding, this continues to work as it always has done. The issue is with vertical margins and padding. Would you prefer the Chrome behaviour, of the Firefox one? Other than the aspect ratio padding hack, are you using vertical margins and padding for any other reason?

You can comment directly on the GitHub issue with thoughts and use cases. It would be great to get this particular interoperability problem solved.

]]>
Wed, 20 Dec 2017 10:00:00 +0000CSS Survey Rounduphttps://www.rachelandrew.co.uk/archives/2017/11/13/css-survey-roundup/
https://www.rachelandrew.co.uk/archives/2017/11/13/css-survey-roundup/
As part of preparing for the An Event Apart talk that I’m giving for the next few shows, I published a survey. I wanted to have some more data on how people were using CSS and how they felt about new CSS features. This post is an initial roundup of some of the things I learned - thank you to everyone who completed this.

Who completed the survey?

543 surveys were completed. I had asked people to submit details of a specific project so it may be that some people completed the survey for multiple projects. I’d also left the majority of questions skippable, therefore totals won’t be 100% for some questions.

The people who completed the survey said that they were (in the context of this project):

Answer

Percentage

Total

A freelancer

19.22%

104

Employed, working for external client

31.05%

168

Employed, working on in-house project

37.34%

202

Working on own company site

4.07%

22

Working on a side project

5.91%

32

Other

2.40%

13

The ‘other’ responses included students working on projects, and volunteers on non-profit sites.

I also asked people to describe their personal skills level, as you would imagine this was a fairly self-selecting bunch of CSS-ers and so people categorised themselves with very few exceptions as either Intermediate or Expert. What was interesting however was that 37% of people selected the answer, “Used to consider myself an expert but need to update skills for all this new stuff!”

What were the projects?

Something I was really keen to get were responses from people working on large projects for bigger companies. I am half of a tiny little company, and my experience of big companies is only as a consultant, or dropping in to lead a workshop. That’s a very different experience to working on a project day to day at that scale. As it turned out, the majority of responses were from people working in such an environment.

There were many project with large teams, and where multiple people are working on the CSS in addition to plenty of solo efforts. 27% of respondents were working completely alone on a project, however when asked how many people worked on the CSS part of a project 48% of people indicated they were the only person who touched the CSS.

There was a good split of completely new work, and additions to existing projects.

Question: Is this project?

Answer

Percentage

Responses

A completely new site or application

32.47%

175

A complete replacement of an existing site or application

35.81%

193

An addition to an existing site or application

9.09%

49

Work on an existing site or application (eg. your company website, or your work is on the product itself)

22.63%

122

I also asked who owned the CSS part of the project. 65% of respondents stated that they were the owner, with almost 4% admitting that no-one would claim responsibility for it!

Elderly CSS

One of the challenges of adopting shiny new techniques is when your site consists of older CSS. I wondered just how old the CSS was that was out there, so this question was for those not working on a brand new project. How old is the oldest CSS in your project?

There were a surprising number of projects with code dating back over 10 years, around 8% of projects. This became less surprising when I started to think about it - we updated the UI of our product Perch this year. The UI that we replaced has code dating back to launch in 2009.

Yes, there are still tables for layout and font tags out there. I asked the same question from the stage at An Event Apart in San Francisco which mirrored these results.

Features & Frameworks

I wondered exactly what CSS people were using, or thought they might use and whether the responses included a lot of framework use.

Just over 31% were using a third party framework. The majority of that (22%) was Bootstrap, in addition we had Foundation at 3% and a few people for each of the following frameworks.

Angular

Ionic

Bulmar.io

Purecss

Tachyons

Respondents seemed pretty happy to use new CSS. Of total responses the below table shows how many people currently used new features.

Question: Which of the following CSS features are currently used in your project?

Feature

% using

Number using

Flexbox

83.27%

438

CSS Grid

23.76%

125

CSS Shapes

3.42%

18

CSS Custom Properties (CSS Variables)

20.34%

107

calc

65.97%

347

CSS Transforms

76.81%

404

CSS Animations

69.20%

364

Feature Queries (@supports)

31.37%

165

However, common threads emerged when asking people why they don’t use some new CSS (assuming there is a project need for it).

There are a lot of people who believe that creating fallbacks equates to “two sets of layout code”.

There are lots of people searching for magic polyfills to make things look “the same” in old browsers.

There are other people assuming that using a feature means also using “bloated polyfills”

Many people believe Grid needs to become “more mature”, whatever that means. I’m going to believe that they mean like cheese. If it gets to a point where it smells so funky we have to keep it on the back step - use it then!

CSS Variables get a lot of mention, in terms of no support in IE11 and the fact that a lot of their functionality can be implemented via a pre-processor.

The need to support IE11 as a browser that is fully supported and has the same experience as other modern browsers is a big theme throughout.

Those old browsers then

Defining browser support is an interesting thing. What does supporting a browser mean? For me it means people can access and use the features of the site or application, not that it looks identical to everyone.

In the survey 10% of people defines support as “looks the same”. 55% chose the option of, “the majority of features must render in the same way, but we’re ok about some finishing touches not being there for all browsers”. 34% were closer to my thinking with “We are happy to serve a simpler version to older browsers in our support list, but all functionality should be usable”.

Internet Explorer support is often what people think about when we talk about old browsers. Just over 38% of respondents had IE11 as the oldest IE they needed to support. The breakdown is as follows, nice to see the really old IEs disappearing from the picture for most people.

Question: What is the oldest version of IE/Edge that your project has to support?

Version

% with that as oldest supported IE/Edge

IE6

1.32%

IE7

0.94%

IE8

6.39%

IE9

19.74%

IE10

24.06%

IE11

38.72%

Edge

8.83%

With older versions of other browsers, citing support for “the last 2 versions” was very common. Although lots of people said they didn’t test in older versions of Firefox or Chrome, perhaps the benefit of evergreen browsers is people stop fixating on a version number and instead look at feature support?

I asked about testing on mobile devices and while almost 17% of people had access to a device lab the top testing method was to look on your own phone and any others that are around. 43% of people used Browserstack or another online tool and 48% had used an emulator.

Deciding on which browsers to support with data

65% of people had access to analytics to make browser support decisions and in the free text responses about how decisions are made to support browsers, the majority of responses cited knowledge of what browsers were visiting the existing site or others with similar traffic. A very common way to decide on support based on data was a percentage of visits - if a browser had 1% or 2% or more of the traffic it is supported.

Many people working in large companies reported that the decision was made higher up than them, and therefore they didn’t know they just had to work with it.

How do you feel when a new CSS feature is announced?

I’m always happy to see new features in CSS or in any part of the web platform. My last question asked what people felt when something new was announced. A lot of people - and this survey was always going to be somewhat self-selecting - said they were excited however there were other responses that came up on multiple surveys.

“It will be a long time before we can use it” is a very common response, reflecting the high level of support people want to offer to older or nonsupporting browsers.

There are a lot of people who have a somewhat outdated understanding of how features get into browsers, and how interoperable something like Grid Layout is at the point of shipping. There is an assumption that new things in browsers will be buggy and fragile for years. I hope we can start to change that viewpoint.

A lot of people mention they feel overwhelmed, another new feature to learn (and all the workarounds). One person just put, “tired”.

I’ve been thinking about all of these points a lot. I’m not exactly a shiny new developer myself, and my own product supports IE9, so there is no ivory tower here. However what makes the difference between being excited and able to play with new things with confidence, and just feeling burned out by it all and annoyed that you can’t use all of it immediately? I have thoughts about that, but I’ll leave them for some other post.

]]>
Mon, 13 Nov 2017 16:43:00 +0000Launching today: The New CSS Layouthttps://www.rachelandrew.co.uk/archives/2017/10/10/launching-today-the-new-css-layout/
https://www.rachelandrew.co.uk/archives/2017/10/10/launching-today-the-new-css-layout/I am author or co-author of 22 books, book number 22 is The New CSS Layout, published by my good friends over at A Book Apart, and launching today.

Book number 22 only happens because 15 years ago I said yes to book number 1. It was 2002, and I was approached to write a couple of chapters of a book to be published by Glasshaus. I left school at 16 to study dance, so to say that I felt underqualified to write a book is very much an understatement. I decided that it was just a couple of chapters and if it was terrible they would find someone else to complete the work. I said yes. It must have been ok, as here we are today.

In The New CSS Layout I’ve tried to use my 20 year experience as a web developer, along with my knowledge of shiny new specifications like Grid Layout, to put these new layout features into context. I think that is important, as the majority of the questions and confusion around new specifications are due to a misunderstanding of how CSS layout works at all. In a world of frameworks and abstractions, it is easy to become separated from the concepts that underpin everything that we do. To really take advantage of everything we have now, we need to understand where it came from and why it works.

My aim is that after reading this book you’ll have a better understanding of how Flexbox and Grid Layout work, and be able to put that knowledge into practice. However my real hope is that you take away something more than just knowledge of those individual features. If I could give you anything it would be the ability to dig into and understand new features for yourself, to be free to play, experiment and develop new ideas.

You can find details of the contents here, and buy your own print or e-book copy over on A Book Apart. I really hope you like it.