recentpopularlog in

spaceninja : cssbasics   324

« earlier  
CSS Scroll Snap — How It Really Works
Without this CSS property, if we’ll scroll the list, we need to be gentle with the scrolling and bring the item as close as we can to the boundaries of the container. But with this property, we just need to scroll it a just over the 50% and the browser will complete the scrolling till the position we wanted.
fridayfrontend  css  cssbasics  scroll-snap 
3 days ago by spaceninja
Designing for Dark Mode
Today, almost all of the web content we run into doesn't take into account whether the browser and/or operating system are running in dark mode. We take this shortcoming for granted despite expecting most of our native apps, our code editors, and so on to look and feel properly themed to match our overall computing environment. When both the browser and the operating system are all dark, wouldn't it be nice if the web content we browse adapted to reflect that preference as well?
fridayfrontend  cssbasics  design  darkmode  prefers-color-scheme 
3 days ago by spaceninja
To Grid or to Flex?
In this article I want to unpack when and where you might want to use Grid or flexbox, and some reasons for choosing one or the other. What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  flexbox 
3 days ago by spaceninja
Quick! What's the Difference Between Flexbox and Grid?
There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things... There are plenty of layout situations in which you could use either one to do what we need to do, and plenty of situations where one is more well-suited than the other. Let's focus on the differences rather than the similarities:
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
3 days ago by spaceninja
HTML Tables: All there is to know about them
So how to make a table in HTML? When to use it and why? What are good HTML table examples? Today, we are going to answer these questions and more to help you understand everything there is to know about HTML tables.
fridayfrontend  cssbasics  html  tables 
3 days ago by spaceninja
Do I have to add a dark mode now?
I thought it’d be a nice, albeit silly experiment to learn what is involved in designing a dark theme for my website. Turned out, it’s not as silly as I thought.
fridayfrontend  css  cssbasics  darkmode  prefers-color-scheme 
3 days ago by spaceninja
Links that don’t go anywhere should be buttons
You use an anchor if you want to create an interactive element in the your site or app that takes you to another web resource. You do not use an anchor element to trigger scripting functionality. That’s what the button element is for.
fridayfrontend  cssbasics  html  accessibility  buttons  links 
3 days ago by spaceninja
Position: stuck; — and a Way to Fix It
The shortcomings of position: sticky; when working with overflow — In this article, I want to explore the shortcomings of position: sticky; — specifically how we might be able to think up a creative technique when working with overflows, which causes frustration when working with the native solution.
fridayfrontend  css  cssbasics  sticky  overflow 
3 days ago by spaceninja
Where Do You Nest Your Sass Breakpoints?
I love nesting my @media query breakpoints. It's perhaps the most important feature of Sass to me. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I'm never quite sure which one I should be doing.
fridayfrontend  css  cssbasics  sass  mediaqueries  nesting 
3 days ago by spaceninja
Tips for making interactive elements accessible on mobile devices
WCAG was updated to version 2.1, which includes a whole new section on guidelines for mobile accessibility. There are several new mobile-specific rules, such as rule 1.3.4, that “content should not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.” In this article, I will cover some of the new guidelines that relate to interactive elements on a web page.
fridayfrontend  cssbasics  accessibility  wcag  mobile 
3 days ago by spaceninja
The only reason your CSS fails
We are learning CSS the wrong way… There are four core concepts that I believe, if taught correctly, would save us from 99% of CSS issues: block formatting context, box model, stacking context, and the cascade (particularly specificity).
fridayfrontend  css  cssbasics  blocks  boxmodel  z-index  cascade 
3 days ago by spaceninja
This or that? Component Names: index.js or Component.js
I’m not sure if you’re aware, but there are sometimes different ways to do the same thing. Crazy, right? As a consultant I get to see a lot of different codebases, and I try study other projects’ architecture in order to better understand this Brave New JavaScript World we’re living in.
fridayfrontend  javascript  cssbasics  components  names  namespacing  standards 
3 days ago by spaceninja
Quick Note on high contrast mode
When testing websites and apps in Windows high contrast mode (HCM), there are two issues I’ve come across over again and again: HCM cares not for your ARIA roles, and background images are (mostly) ignored.
fridayfrontend  cssbasics  accessibility  highcontrastmode  contrast  backgrounds  aria 
3 days ago by spaceninja
Skip links are important
“Skip links” are important. They allow keyboard-only users, sighted or not, to bypass large or repetitive blocks of content. You may have heard of them and wondered what the big deal is. Or your design team may have refused to implement one because they look “ugly”. But they are important, and they don’t have to break the design.
fridayfrontend  cssbasics  html  accessibility  skiplinks 
3 days ago by spaceninja
How To Architect A Complex Web Table
Tables frequently appear on the web but aren’t easy to design and code. This illustrated guide explains the table anatomy and how to build a table, keeping in mind its future elaboration.
fridayfrontend  cssbasics  html  tables 
10 days ago by spaceninja
Revisiting the abbr element
All of that said, here’s my attempt at enhancing the <abbr> element and creating a tooltip experience that works for touchscreen, keyboard, and mouse. This solution isn’t perfect, as I discuss below under the limitations, but I wanted to make an attempt anyway :)
fridayfrontend  cssbasics  html  abbr  accessibility 
10 days ago by spaceninja
Slide an Image to Reveal Text with CSS Animations
Pretty neat little animation, right? It’s relatively subtle and acts as a nice enhancement to UI elements. For example, I could see it used to reveal explanatory text or even photo captions. Or, a little JavaScript could be used to fire the animation on click or scroll position to make things a little more interactive.
fridayfrontend  css  cssbasics  animation 
10 days ago by spaceninja
Form design: when to use the number input
You might think the number input is appropriate for the card number, expiry date, and CVC number — after all, they all consist of numbers. But it’s more complicated than that. By looking at what the spec says, what browsers do, and what users want, we can more easily determine when the number input is appropriate or not.
fridayfrontend  cssbasics  forms  html  numbers  inputs 
10 days ago by spaceninja
A Guide To CSS Support In Browsers
It can be frustrating when you want to use a feature and discover that it is not supported or behaves differently across browsers. In this article, Rachel Andrew details the different types of browser support issues, and shows how CSS is evolving to make it easier to deal with them.
fridayfrontend  css  cssbasics  support  supports  browsers 
10 days ago by spaceninja
Quick Tip: CSS Triangles
Making a triangle in CSS is quite a common UI task. If you want to build a tooltip or any dropdown menu, it is possible you need one.
fridayfrontend  css  cssbasics  shapes 
10 days ago by spaceninja
Where Do You Learn HTML & CSS in 2019?
The question of how and where to learn CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have, among probably a zillion other things.
fridayfrontend  css  html  cssbasics  learning 
10 days ago by spaceninja
CSS :placeholder-shown
The :placeholder-shown pseudo-clas targets an <input> element's placeholder only when it's shown, and thus I could select just the placeholder but not the input's text:
fridayfrontend  css  cssbasics  placeholders  placeholder-shown 
10 days ago by spaceninja
Solving a Tricky Layout Problem with CSS Grid
This article is a case study on a particular component with a unique layout and a set of constraints. Building a layout that worked for the large number of requirements, as well as unknown content, required applying lateral thinking and a great deal of problem solving to find the right solution.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
16 days ago by spaceninja
How to use web fonts in CSS
Web fonts have revolutionized site typography during the past decade. Designers have fewer constraints and can implement typefaces which work on all mainstream devices and browsers. In this tutorial, we discuss various techniques and best practices for adding custom fonts to web pages.
fridayfrontend  css  cssbasics  webfonts  typography  fout  foit  font-display 
16 days ago by spaceninja
A Detailed Guide to CSS Animations and Transitions
Read along as this is an extensive excerpt covering the basics of CSS animations and transitions that could immensely help you in achieving the same for your business website.
fridayfrontend  css  cssbasics  animation  transitions  transforms  keyframes 
16 days ago by spaceninja
A look at CSS hyphenation in 2019
Let’s have a look at the browser support of CSS Hyphenation, how to use it today and which feature I would like to see in browsers.
fridayfrontend  css  cssbasics  typography  hyphens  word-wrap  overflow-wrap  hyphenate-limit-chars 
16 days ago by spaceninja
My Grid Layout
My site’s design came through a lot of iterations, including the latest complete rewrite and a partial redesign, but its layout is something I used for a while. In this article, I’ll describe what I tried to achieve with it and how it was re-implemented using CSS Grids.
fridayfrontend  css  cssbasics  layout  grids  cssgrid 
16 days ago by spaceninja
Table Design Patterns On The Web
Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019.
fridayfrontend  css  cssbasics  tables  html  responsive  javascript  accessibility 
16 days ago by spaceninja
CSS Position Sticky - How It Really Works!
CSS position sticky has really good browser support, yet most developers aren’t using it. The reason for that is twofold: First, the long wait for good browser support: It took quite a long time for browser support to happen, and by the time it did the feature was forgotten. The second reason is that most developers don’t fully understand the logic behind how it works, and that’s where I come in.
fridayfrontend  css  cssbasics  position  sticky 
16 days ago by spaceninja
Flexbox.ninja – Solved by Flexbox High Kick
Flexbox is nowaday one of the problem solvers you should master to help you in your working daily habits. Follow those little demonstrations and case studies to learn more about CSS Flexbox Layout, step by step, and become a Flexbox Ninja!
fridayfrontend  css  cssbasics  flexbox  layout  grids 
16 days ago by spaceninja
Don’t feel like an expert? Share anyway.
Too many of the most interesting voices in tech and design talk themselves out of writing or speaking about their work—because they don’t think they have enough experience. But you don’t have to wait for “enough“ (whatever that means). Here’s how to find what’s special about your perspective right now—wherever you are in your career.
fridayfrontend  writing  cssbasics  learning  teaching  blogging 
16 days ago by spaceninja
Firefox DevTools for CSS authors
If you’re a developer, chances are there’s a set of tools you hold near and dear to your heart, and of course, any browser DevTool is numero uno on that list. With Firefox releasing amazing improvements to their DevTools at a rapid rate, it’s a good time to investigate the powerful aspects specifically geared towards CSS authors.
fridayfrontend  css  cssbasics  firefox  devtools 
16 days ago by spaceninja
CSS: From Zero to Hero
CSS defines the way things look on your websites. HTML is your content, JavaScript adds interaction, but the appearance comes down to CSS. CSS is super powerful, and has a ton of awesome stuff built in. This post will take you from introductory syntax through creating layouts and making sites responsive!
fridayfrontend  css  cssbasics 
16 days ago by spaceninja
What is actually CSS-in-JS?
CSS-in-JS refers to a collection of ideas to solve complex problems with CSS. Since it is NOT a particular library, different libs might solve a different subset of problems and use different approaches, depending on their implementation details. However, all implementations have in common that they tackle the problems using APIs instead of convention and they leverage JavaScript as a language.
fridayfrontend  css  cssbasics  javascript  css-in-js 
16 days ago by spaceninja
prefers-color-scheme: CSS Media Query
Wouldn't it be amazing if websites would also go dark or light based on user's system preference? The CSS working group agrees, which is why they've created a prefers-color-scheme media query; a media query that signals what the user's theme preference is and allows you to code your site to match that preference!
fridayfrontend  css  cssbasics  prefers-color-scheme  darkmode 
16 days ago by spaceninja
Formatting code and pre text
In a recent project, I came across a situation where there were varying lines of text that had to be displayed in the UI. This falls under something that I don’t work with a lot. Also, a couple of the properties have similar names, so I had to double check them to make sure I was styling things correctly (word-break, break-word, etc.). I’ll be talking through the various ways to display text and go a few ways to correct the “bad wrapping” issue. I’ve setup an experimental Codepen.
fridayfrontend  css  cssbasics  pre  word-break  break-word  word-wrap  overflow-wrap  hyphens  white-space 
24 days ago by spaceninja
CSS is a Declarative, Domain-Specific Programming Language
15 years ago, CSS would still be a programming language according the liberal definition laid out here, and now, in 2018, it’s a programming language according to other definitions, too. In it’s current implementation, CSS/HTML is Turing complete, CSS has functions and variables, CSS has math. And it’s only getting more powerful!
fridayfrontend  css  cssbasics  programming 
24 days ago by spaceninja
Building Better Forms™ by not taking away affordances
Don’t fiddle too much with your forms‘ look and feel. A small innocent-looking piece of CSS, even when combined with semantically correct HTML, could leave you with a degraded User Experience and make your forms less Accessible.
fridayfrontend  css  cssbasics  html  forms  accessibility 
24 days ago by spaceninja
3 Useful CSS & HTML Features You Might Have Forgotten About
The inspiration for this article came from running across a tweet from Potch and realizing I had made the exact mistake that was described just a day earlier. It led me to thinking of a couple more CSS & HTML features we often forget about that can be very useful throughout our day-to-day work.
fridayfrontend  css  cssbasics  html  selectors  summary  details  progress 
24 days ago by spaceninja
CSS Specificity
CSS Specificity is the set of the rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher point value it accrues, and the likelier it is to be present on the element's style. There are many benefits of understanding CSS Specificity and leveraging it to your benefit.
fridayfrontend  css  cssbasics  specificity 
24 days ago by spaceninja
How do you figure? | scottohara.me
Introduced as part of HTML5, the figure and figcaption elements are meant to create a meaningful markup structure that provides a descriptive label to a piece of content that is relevant to the current document, but not vital to its understanding. To get more specific, let’s look at these elements individually.
fridayfrontend  cssbasics  html  figure  figcaption 
24 days ago by spaceninja
HTML5 Input Types: Where Are They Now?
HTML5 introduced thirteen new types of form input, adding significantly to the number of different fields web designers and developers could add to our forms. These new types all require browsers to support them, and take-up has been slower than some of us would have liked. What is the state of those field types in 2019? Which can we use, and which should still be avoided?
fridayfrontend  cssbasics  html  html5  forms  input 
4 weeks ago by spaceninja
Dissecting Front-end Job Titles
It used to be straight forward. There was frontend, there was backend, and there was often a graphic designer. In the world of web development titles, things were pretty straight forward. If you stated you did frontend, it was assumed that you knew HTML, CSS, some JS, jQuery, and you knew your way around Adobe and Macromedia products. The multitude of tech boot camps would have you think that we’ve moved to UX/UI, Frontend, Full Stack, and Backend (in which you have a selected stack of programming languages). In reality, the tech world has become so diverse that what would otherwise be front-end roles have such obscure titles that you aren’t sure what you’re applying to.
fridayfrontend  cssbasics  titles  jobs  careers 
4 weeks ago by spaceninja
Creating Accessible SVGs
Based on these results, it is clear that not all SVG patterns are created equal when it comes to accessibility. Which pattern you choose to implement depends on many factors like how difficult it is to modify baked-in framework code and which browsers/screen readers you are targeting. But no matter which pattern you choose to use, be sure to set aside some time to do your own accessibility/user testing. As SVGs continue to dominate the visual world, it is important not to leave AT users in the dark!
fridayfrontend  svg  accessibility  cssbasics 
4 weeks ago by spaceninja
How Well Do You Know CSS Layout?
The difference between a CSS good experience and a long frustrating one is oftentimes a matter of a few small details. CSS is indeed nuanced. One of the most common areas where I see struggles is layout. Personally, I like to study patterns. I notice that I tend to use a small group of patterns to solve the majority of my layout problems. This article is about those CSS patterns I use to get myself through layout challenges. It is also about approaching situations agnostically, regardless of the CSS methodologies used, whether that’s SMACSS, BEM, or even the hot topic of CSS-in-JS because they all focus on the properties themselves rather than architecture, organization, or strategy.
fridayfrontend  css  layout  cssbasics 
4 weeks ago by spaceninja
Web Standards: The What, The Why, And The How
Web Standards, and the documentation to support them, provide huge insight into ‘the why’ and ‘the what’ of the world wide web. They are a fantastic resource for any web developer and help people build stuff for the web that is functional, accessible and cross-compatible. In this article, we take a look at the history of Web Standards, how to use them in your work and ways you can get involved in making them.
fridayfrontend  css  cssbasics  standards 
4 weeks ago by spaceninja
The Complete Guide To SCSS/SASS
You can’t really appreciate the power of Sassy CSS until you create your first for-loop for generating property values and see its advantages. But we’ll start from basic SCSS principles and build upon them toward the end.
fridayfrontend  css  cssbasics  sass 
4 weeks ago by spaceninja
It’s 2019 and I Still Make Websites with my Bare Hands
Except for the minimum requirements (a text editor and a local web server), my “process” doesn’t need any special tooling: no compiling, no installation steps, no package management. It’s just me, my text editor, my web server, and understanding the basics of how websites work.
fridayfrontend  css  cssbasics  process  javascript  frameworks 
5 weeks ago by spaceninja
Why we need CSS subgrid
There has been a lot of discussion over the last 2 years about the use cases for subgrid, how it should be implemented, and even some debate over whether you even need it. A lot of that discussion was centered around two other approaches that can handle many of the same problems as subgrid: nested grids and display: contents. This article will explore both of those approaches, and I hope to demonstrate that there are still some very valid cases where a subgrid is truly needed, and others where it is not strictly needed, but would make for a much cleaner solution.
fridayfrontend  css  cssbasics  cssgrid  layout  grids  subgrid 
5 weeks ago by spaceninja
New ES2018 Features Every JavaScript Developer Should Know
The ninth edition of the ECMAScript standard, officially known as ECMAScript 2018 (or ES2018 for short), was released in June 2018. Starting with ES2016, new versions of ECMAScript specifications are released yearly rather than every several years and add fewer features than major editions used to. The newest edition of the standard continues the yearly release cycle by adding four new RegExp features, rest/spread properties, asynchronous iteration, and Promise.prototype.finally. Additionally, ES2018 drops the syntax restriction of escape sequences from tagged templates.
fridayfrontend  css  cssbasics  javascript  es6  es2018  regex  rest  spread  async  finally  promises 
5 weeks ago by spaceninja
CSS-only multiple choice quizzing
I followed a link to one of those Guardian end-of-year quizzes on my phone (probably this one), and had answered a few questions before realising that it was working entirely without JavaScript (I have JavaScript disabled on my phone because a) it cuts out most of the ads, b) it cuts out lots of bandwidth and I have a limited data plan, and c) my battery lasts longer because it’s not processing tons of code to show me some text (cough, Medium)).
fridayfrontend  css  cssbasics  quiz  multiplechoice  forms 
5 weeks ago by spaceninja
Sass Techniques from the Trenches
Having been in the web development industry for more than 14 years, I’ve seen and written my fair share of good and bad CSS. When I began at Ramsey Solutions five years ago, I was introduced to Sass. It blew my mind how useful it was! I dove right in and wanted to learn everything I could about it. Over the past five years, I’ve utilized a number of different Sass techniques and patterns and fell in love with some that, to steal Apple’s phrase, just work.
fridayfrontend  css  cssbasics  sass 
5 weeks ago by spaceninja
On the importance of testing with content blockers
I recommend everyone to browse with content blockers turned on. The goal: protection against tracking. Safari and Firefox have good tracking protection features. With more people using these features, we should test our sites with content blockers turned on.
fridayfrontend  css  cssbasics  testing  contentblockers  adblockers  security  layout 
5 weeks ago by spaceninja
Complicated Checkerboard Layouts with CSS Grid & SVGs
I’m so excited when my clients push the boundaries of “normal” web design and allow me to use some of the latest cool CSS available. I was given this square based, checkerboard Gridded design and told to run off and see what I could do. This design presented a lot of issues and it took a lot of upfront thinking, as well as 4 or 5 different routes, before I found the perfect balance between usability, responsiveness, and keeping the design integrity. There are already a lot of tutorials on CSS Grid, but none of them address the issues I was having, especially when it came to keeping everything square, matching with the background checkerboard, and being responsive at the same time (have I broken your brain yet!?).
fridayfrontend  css  cssbasics  layout  cssgrid  grids  svg 
5 weeks ago by spaceninja
Responsive Images Using SVG Instead of Srcset
In conclusion, if your images can be exported to SVG, use SVG instead, and save a ton of bandwidth and your users will thank you for it. Thanks for reading!
fridayfrontend  cssbasics  svg  images  performance  srcset  responsive 
5 weeks ago by spaceninja
Checking if an input is empty with CSS
Yes, it is possible to validate a form with pure CSS, but there are potential problems with validation when whitespace characters are involved.
fridayfrontend  css  cssbasics  empty  forms  validation 
5 weeks ago by spaceninja
Reader Mode: The Button to Beat
What we’re going to discuss is how to keep people like me from hitting that button by relying on this nifty programming language the W3C so wisely gave us. Because if you don’t, all that other stuff—your newsletter signup boxes, your comments, your related articles, your engagement—will be cut away.
fridayfrontend  css  cssbasics  accessibility  readability  readermode 
5 weeks ago by spaceninja
Baseline Rules for Scrollbar Usability
Now that one of the most popular CSS resource sites on the innertubes has implemented styled scrollbars in the browser I think the time is right (or too late?) for me to try to capture a starting point for ensuring they are usable.
fridayfrontend  css  cssbasics  scrollbars  accessibility 
5 weeks ago by spaceninja
Piecing Together Approaches for a CSS Masonry Layout
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010. JavaScript library. Nothing against JavaScript, but it's understandable we might not want to lean on it for doing layout. Is there anything we can do in CSS directly these days? Sorta.
fridayfrontend  css  cssbasics  layout  masonry  javascript  flexbox  cssgrid  multicol 
5 weeks ago by spaceninja
When And How To Use CSS Multi-Column Layout
The Multi-column Layout spec is often overlooked as we use Grid and Flexbox. In this article Rachel Andrew explains why it is different to other layout methods, and shows some useful patterns and sites which showcase it well.
fridayfrontend  css  cssbasics  multicol  columns  layout 
5 weeks ago by spaceninja
Toggling Animations On and Off
In this article, we are going to try to make everyone happy independent of what their views on animations might be. We are going to give our users full control over whether they want to see animations or not, and we are going to do that by employing a few cool technical tricks.
fridayfrontend  css  cssbasics  animation  accessibility 
5 weeks ago by spaceninja
Simple CSS Animation Tutorial
You can animate any CSS property whose physical position, dimensions, angle or color can be changed. Basic animation is surprisingly simple to implement using keyframes.
fridayfrontend  css  cssbasics  animation 
6 weeks ago by spaceninja
Multi-Line Inline Gradient
The trick there is to set up the padded multi-line background just how you want it with pure white text and a black background. Then, a pseudo-element is set over the whole area with the gradient in the black area. Throw in mix-blend-mode: lighten; to make the gradient only appear on the black area. Nice one.
fridayfrontend  css  cssbasics  gradients  backgrounds  highlight 
6 weeks ago by spaceninja
How To Learn CSS
You don’t need to commit in memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. This article aims to guide you along your path of learning CSS.
fridayfrontend  css  cssbasics  training 
6 weeks ago by spaceninja
Gradient Borders in CSS
Let's say you need a gradient border around an element. My mind goes like this: There is no simple obvious CSS API for this. I'll just make a wrapper element with a linear-gradient background, then an inner element will block out most of that background, except a thin line of padding around it.
fridayfrontend  cssbasics  css  gradients  borders  border-radius  border-image 
7 weeks ago by spaceninja
Common CSS Issues For Front-End Projects
Rendering and interaction have become a lot more consistent across browsers in recent years. It’s still not perfectly uniform, however, and a lot of small issues can trip you up. Add on top of these issues the variables of different screen sizes, language preferences and plain human error, and we find a lot of small things to trip up a developer.
fridayfrontend  cssbasics  troubleshooting  css 
7 weeks ago by spaceninja
Regarding CSS's Global Scope
CSS is global by nature. On purpose! Love the cascade, the cascade is your friend. And yet. The global nature of CSS is perhaps the most-pointed-at anti-feature of CSS. Some people really don't like it. We all know it's very easy to write a single CSS rule that has implications all over a site, breaking things you really didn't want to break.
fridayfrontend  cssbasics  global  cascade 
7 weeks ago by spaceninja
Making single color SVG icons work in dark mode
In a project I work on, we had a couple of buttons that consisted of just icons (with visually hidden help text). The awesome QA engineer I worked with, found some of those did not show up in dark mode, which rendered the buttons unusable for users of that mode. Using inline SVGs with currentColor fixed the issue.
fridayfrontend  cssbasics  svg  currentcolor  darkmode  accessibility 
7 weeks ago by spaceninja
Getting started with web performance: 2019 beginner’s guide
There are many very good articles out there on how to use new feature X or technique Y or tool Z to improve the performance of your websites. Navigating the labyrinth of modern web performance might be hard though if you’re new to the topic. In this article I will try to come up with a guide to getting started your performance journey.
fridayfrontend  cssbasics  performance 
7 weeks ago by spaceninja
Generic First CSS: New Thinking On Mobile First
With the advent of responsive web design and the mobile-first approach, it’s been seven wonderful years since any new concepts have compelled us to adapt the way in which we write CSS at the base level. Well, I don’t have anything too groundbreaking to offer you, but I do have a small surprise. Behold: Generic First CSS.
fridayfrontend  css  cssbasics  mobile  mediaqueries 
8 weeks ago by spaceninja
The practical value of semantic HTML
I hope I’ve shown you that choosing the correct HTML isn’t purely an academic exercise. Perhaps you can’t use all the above (and there’s much more that I haven’t discussed) but when you can, please consider whether there’s an HTML element that you could use to describe parts of your content. Semantic HTML will give usability benefits to many users, help to future-proof your work, potentially boost your search engine results, and help people with disabilities use your site.
fridayfrontend  css  cssbasics  html  semantics 
8 weeks ago by spaceninja
Making the abbr element work for touchscreen, keyboard, and mouse
The <abbr> element works well enough on desktop devices as long as the user is interacting with a pointing device. However, it fails for users who are interacting with the page via the keyboard or a touchscreen device. This is because of two things: 1) The <abbr> element isn’t able to be brought into focus, e.g. by a keyboard user pressing the tab key. 2) Mobile browsers don’t display the tooltip on any interaction from the user.
fridayfrontend  css  cssbasics  html  abbr  mobile  touch 
8 weeks ago by spaceninja
New CSS Logical Properties!
Before you start using the new logical properties, you need to stop thinking in terms of left/right or top/bottom, and replace them with inline-start/inline-end and block-start/block-end.
fridayfrontend  css  cssbasics  inline-start  inline-end  block-start  block-end 
8 weeks ago by spaceninja
Nobody is quite wrong.
There are two opposing views on using non-polyfillable new web features that I find are both equally common in our industry: 1) Websites don't need to look the same in every browser. 2) If browser support isn't where I want it to be, it's just exotic eye candy for demos and not to be used. I'm not sure I'd say either one of these is more or less correct than the other.
fridayfrontend  css  cssbasics  progressive  enhancement  polyfills 
8 weeks ago by spaceninja
Building an animated sticky header with custom offset
The task is to build a sticky header that appears when the user scrolls past the static header or on a custom offset position. When scrolling down, the static header should stay at its place, while the sticky header should roll down. When scrolling up, the sticky header should disappear, and the static header should roll down. Note that the content of the static header and the sticky header differs.
fridayfrontend  css  cssbasics  sticky  position  offset  layout 
9 weeks ago by spaceninja
A CSS Venn Diagram
I had use for CSS shapes in a project and wanted to play around beyond what the project itself allowed. I decided to revisit my Venn diagram and create something a bit more modern and flexible. This also gave me a chance to play with CSS grid overlaps, which I had not done yet simply because I had no reason.
fridayfrontend  css  cssbasics  venn  charts  diagrams  cssgrid  shape-outside 
9 weeks ago by spaceninja
The visibility property isn’t just about visibility
This made me think about the behaviour of the visibility property, particularly the hidden value, as it relates to the different kinds of “visibility” - visual, spatial, assistive technology, and interaction. When we hear the world “visibility”, we tend to only think of vision. As we will see, the visibility property isn’t just about (visual) visibility.
fridayfrontend  css  cssbasics  visibility  accessibility 
9 weeks ago by spaceninja
Better Boolean Variable Names
Coming up with good variable names can always be a challenge. For boolean values, prefix it with is, has, or can. Just by reading the name, you’ll know it’s a boolean
fridayfrontend  css  javascript  cssbasics  variables  boolean  names 
9 weeks ago by spaceninja
Inclusive Considerations When Restyling Form Controls
Scott O’Hara hogs the remote while he looks into the ever-present issue of custom form controls. We might brute-force an element to take on the styling we’re looking for, but will that interaction still make sense for all users? Let’s give the batteries a rub and find out.
fridayfrontend  css  cssbasics  html  forms  accessibility  controls 
9 weeks ago by spaceninja
« earlier      
per page:    204080120160

Copy this bookmark:





to read