Tag: css

As a person with a disability, I appreciate the web and modern-day computing for their many affordances. The web is a great place to work and share and connect. You can make a living, build your dream, and speak your mind. It’s not easy, though. Beginners struggling with the box model often take to Google in search of guidance (and end up at this very website). More seasoned developers find themselves hopping from framework to framework trying to keep up. We experience plenty of late nights, console logs, and rage quits. It’s in times like these that I like to remember why I’m doing this thing. And that’s because of the magic of creating. Making websites is empowering because it allows you to shape the world—in ways big and small, public and personal. It’s especially powerful for people w...

(This is a sponsored post.)No sign up required to read the free e-book. Building modern apps (mobile, PWAs or Single Page Apps) that connect to legacy or enterprise systems is a pain. We put together an e-book that discusses the various options for how to make it all work. Here are some of the chapter contents: The Challenges of Migrating to a Modern Mobile Architecture Strategies for Migrating to Mobile Strategies for Migrating to the Cloud Data & Mobile Applications Future-Proofing Your Modernization Efforts Check out our Mobile Modernization: Architect Playbook Direct Link to Article — PermalinkThe post Free E-book: ​Modernize for Mobile Apps appeared first on CSS-Tricks. Source: CSS-tricks.com

I was messing around with a variable font the other day and noticed this weird rendering issue in the latest version of Chrome where certain parts of letterforms were clipping into each other in a really weird way. Thankfully, though, Stephen Nixon has come to the rescue with a temporary hack to fix the issue which using a text-shadow on the text that’s using the variable font: .variable-font { text-shadow: 0 0 0 #000; /* text color goes last here */ } Once you do that, you shouldn’t be able to see those weird clip marks in the letterforms anymore. Yeah, it feels pretty hacky but I’m sure this rendering bug will be fixed relatively soon. It doesn’t look like it affects other browsers, as far as I can tell. Direct Link to Article — PermalinkThe post Better rendering for variable fonts ap...

(This is a sponsored post.)This tutorial will show you how to add realtime comments to a Gatsby blog. You will use Node and Express to create a simple backend, allowing users to add and view comments instantly. Direct Link to Article — PermalinkThe post ​Add real-time comments to a Gatsby blog appeared first on CSS-Tricks. Source: CSS-tricks.com

Keith J. Grant: I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it’s resilient; it’s declarative; and it’s contextual. Understanding these aspects of the language, I think, is key to becoming proficient in CSS. Like HTML, unknown or slightly broken CSS doesn't stop a site in its tracks. You write something you want to happen in CSS, it happens, and a bunch of related things may happen to. I like Keith's example with font-size. Increase it, and the container will also grow in height without you having to tell it to. You can't understand what CSS is going to do without understanding the DOM structure it is paired with and the other styles at play. And it’s my suspicion that developers who embrace these things, and have fully inter...

Evan Minto: The question was “How many users browse the main Internet Archive site with a default font size other than the common value of 16 pixels?” By knowing this, we would determine how many users would be affected by sizing with relative units like rems/ems. Using the methodology I describe below, we found that the answer is 3.08% of our users. So if you set type in pixels, and your traffic is anything like the Internet Archive's, 3% of your users won't have their explicitly-asked-for font-size alteration accommodated. It's true. I made two little reduced test cases. First I left the default medium font-size preference on and set one with pixels and one with ems and sized them to match. Then bumped up the preference to large, and only the ems changed, the pixel-set one stays the s...

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this: I have something that is sort of a line, but because it has varying brush widths, in SVG it is defined as the fill of a path. How can this "brush" be animated? In short: How do you animate calligraphy? A mask path covers the calligraphic brushThe basic technique for this is relatively simple: draw a second (smooth) path on top of the calligraphy so that it follows the brush line and then choose the stroke width in such a way that it covers the calligraphy everywhere. This path on top will be used as a mask fo...

Yes, this is a React component, but regardless if you care about that part or not, the "ideal image component" part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with: Placeholder space (and then flexible responsive styles after loading) Low-quality placeholder images Responsive images syntax (srcset) Image formats (e.g. using WebP when you can) Click-to-load on bad network connections Better UX for loading errors, with translatable copy That's not even all of it. So much to think about with poor little <img>. I enjoyed Alejandro Sanchez's response: The readme file for this component is amazing to teach you how to think like a front-end developer. — Alejandro Sanchez (@alesanchezr) June 12, 2018 Direct Link to Article — P...

When we produce a PNG image, we use an <img> tag or a CSS background, and that's about it. It is dead simple and guaranteed to work. PNG is way simpler to use in HTML than SVGUnfortunately, the same cannot be said for SVG, despite its many advantages. Although you're spoiled for choices when using SVG in HTML, it really boils down to inline, <object> and <img>, all with serious gotchas and trade-offs. Problems with inline SVG If you're inlining SVG, you lose the ability to use browser cache, Gzip compression between servers and browsers, and search engine image indexing (inline SVG is not considered as an image). Even though your image may not have changed one bit, they are always reloaded and this causes slower loading times for your website, a trade-off that most are n...