squidfunk

Although CSS has seen the light of the world [more than 20 years ago][1], it's still surprisingly under-researched. Our websites keep breaking in spectacular ways: visual inconsistencies caused by seemingly minor changes can go undetected for days, negatively impacting the user experience (UX), inducing customer churn and frustration, which can lead to lost opportunities. All too often, CSS is not perceived as a critical resource requiring proactive and deliberate care, but as an annoying necessity to advertise the brand to the consumer.

CSS is a very simple language: its [parsing][2] and [matching][3] semantics are incredibly easy to understand and implement. Moreover, it is very forgiving and

squidfunk

const { Project } = require("@lerna/project")

const packages = Project.getPackagesSync("path/to/lerna.json")
console.log(packages)

squidfunk

/* Hide menu items */
[aria-label^="Home"],
[aria-label^="Search"],
[aria-label^="Bookmarks"],
[aria-label^="Lists"],
[aria-label^="Timeline: Your Home"],
[data-testid^="AppTabBar_More_Menu"] {
  display: none;
}

squidfunk

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

squidfunk

/*
 * Copyright (c) 2016 Martin Donath
 *
 * All rights reserved. No part of this computer program(s) may be used,
 * reproduced, stored in any retrieval system, or transmitted, in any form or
 * by any means, electronic, mechanical, photocopying, recording, or otherwise
 * without prior written permission.
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.