cssbasics   637

« earlier    

How to create auto-sized columns using CSS Grid and setting a minimum column width.
How to create auto-sized columns using CSS Grid and setting a minimum column width.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
6 days ago by spaceninja
The Curious Case of the Render Blocking Resource
We were recently notified by a client that when he visited his department site from China, the site would take a very long time to load. Everything seemed fine on first inspection, so we tested the site using WebPageTest with the Beijing, China (Firefox) location. After waiting in a fairly long queue, one glance at the waterfall made the issue clear.
fridayfrontend  performance  cssbasics 
6 days ago by spaceninja
UI Interactions
UI interactions using one element and pure CSS. Because we love UI interactions and CSS!
fridayfrontend  css  cssbasics  animation  hamburger  icons  ui  ux 
6 days ago by spaceninja
Various Methods for Expanding a Box While Preserving the Border Radius
I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.
fridayfrontend  css  cssbasics  border-radius  animation 
6 days ago by spaceninja
Under-Engineered Text Boxen
This is the latest, and not last, in my informal series of posts on under-engineered controls. Generally I am looking at the minimum amount of CSS necessary to style native HTML controls while also retaining or improving accessibility and honoring different user preferences.
fridayfrontend  html  forms  textarea  inputs  cssbasics  css 
6 days ago by spaceninja
HTML Audio Tag: Cheat Sheet and Examples
Introduced with HTML5, the <audio> tag defines a sound and is used to embed audio content such as music or other streams in HTML documents. As of 2019, <audio> is widely supported among modern browsers. Internet Explorer 8 doesn’t support it, as well as earlier versions.
fridayfrontend  html  audio  cssbasics 
6 days ago by spaceninja
Using Custom Properties to Wrangle Variations in Keyframe Animations
Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would be so nice to drop yet one more dependency and go with vanilla CSS.

Well, I found a way to account for variations within a keyframe animation using nothing but CSS and it’s thanks to custom properties! Let’s learn a little more about how CSS keyframes work and how we can enhance them with CSS and a touch of custom properties.
fridayfrontend  css  cssbasics  animation  keyframes  variables  customproperties 
6 days ago by spaceninja
Table with Expando Rows
I regularly work on projects with HTML tables that have been pushed to the edge with styles, scripts, and widget features. A common pattern is where rows are hidden until the user opts to show them. Unfortunately, the pattern is often over-complicated with unnecessary script and styles that regularly break the table semantics or fail to work across all contexts.
fridayfrontend  html  tables  cssbasics  expanding 
6 days ago by spaceninja
CSS Grid: Magazine Layouts
Wanted to do some magazine layouts, so I decided to create a Marvel Magazine. I regret everything.

Responsiveness may not be perfect.
fridayfrontend  css  cssbasics  magazine  layout  avengers  movies  grids  cssgrid 
6 days ago by spaceninja
Understanding Specificity in CSS
Specificity in CSS refers to the how browsers determine the importance, relevance, and “seniority” of CSS styles. Here we’ll look at all the CSS styling types and use the company analogy to understand how competing styles get resolved.
fridayfrontend  css  cssbasics  specificity 
6 days ago by spaceninja
Fast Static Sites with Netlify and AnyMod
In about 10 minutes, we'll set up a workflow that makes static sites dead simple.

You'll get the following:

Free https
Free or cheap hosting
Build sites quickly
Edit with live reload
Edit when you’ve forgotten everything in 6 months
fridayfrontend  cssbasics  jamstack  netlify  anymod 
6 days ago by spaceninja
How to Fail at Accessibility
So, let’s flip the script, and dive into — “How not to fail at accessibility”
We’re going to cover three main areas:
Testing — how do you know if your website is or is not accessible currently?
Building — once you’ve identified some bugs, how do you code for accessibility?
Process — how can you improve your process to prevent bugs in the first place?
fridayfrontend  accessibility  cssbasics  testing 
6 days ago by spaceninja
Two Browsers Walked Into a Scrollbar
The scrollbar is a humble but productive mechanism that operates as the primary means through which one can traverse a document. But that’s not all a scrollbar can do! This modest workhorse also provides a meaningful hint at how long the document is, pulling double duty as a document progress bar too.

The scrollbar is under attack. Scrolljacking hijacks the default scrolling behavior, breaking the implied contract between document length and scrollbar height.
fridayfrontend  cssbasics  css  html  scroll  scrollbars 
6 days ago by spaceninja
(Why) Some HTML is "optional"
Chris Coyier blogged recently on weird looking HTML. It's a nice short post and I'd say it's worth knowing these optional features (potentially known as defaults). My favourite optional is <script> and not having to include the type attribute.

But Chris' first example is the most common, the optional closing </p> tag. What (I think) is an interesting question is: why?
fridayfrontend  cssbasics  html  optional 
6 days ago by spaceninja
Some HTML is "Optional"
There is a variety of HTML that you can just leave out of the source HTML and it's still valid markup.
fridayfrontend  cssbasics  html  optional 
6 days ago by spaceninja
Adding visually hidden headings to complete a page's outline
Not only the main content of a web page needs to be marked up using headings, but also other elements like header, navigation, footer, etc. As the visual design usually does not include those headings, they need to be visually hidden by moving them off-screen.
fridayfrontend  accessibility  cssbasics  hidden  aria 
6 days ago by spaceninja
CSS Security Vulnerabilities
Don't read that headline and get worried. I don't think CSS is a particularly dangerous security concern and, for the most part, I don't think you need to worry about it.

But every once in a while, articles tend to circulate and get some attention as to the possibilities of what CSS can do that might surprise or worry you.

Here's a little roundup.
fridayfrontend  security  css  cssbasics 
6 days ago by spaceninja
Null variables in Sass
As you can see, the Sass compiler will ignore the entire property: value; declaration because the value is null. But, if someone customized this before compilation by overriding that default value, the CSS would compile. Here’s an example of how you’d override that default variable.
fridayfrontend  css  cssbasics  sass  null  variables 
13 days ago by spaceninja
Need to scroll to the top of the page?
Perhaps the easiest way to offer that to the user is a link that targets an ID on the <html> element. So like...
fridayfrontend  cssbasics  html  scroll  accessibility 
13 days ago by spaceninja

« earlier    

related tags

absolute  accessibility  addresses  after  animation  anymod  apple  architecture  aria-disabled  aria  aspectratio  async  at-rules  attr  audio  auto-play  avengers  backdrop-filter  background-clip  backgrounds  before  bestpractices  border-box  border-radius  box-sizing  boxmodel  browsers  buttons  calc  calendars  caption-side  caption  checkboxes  clamp  clean  clip-path  cms  color  components  content  css-in-js  css  cssgrid  cursors  customproperties  darkmode  datalist  debugging  design  designsystem  devtools  disabled  domains  duotones  ellipsis  empty  expanding  fallback  firefox  flexbox  focus-within  focus  font-smoothing  footer  forms  fridayfrontend  gatsby  generated  generator  glass  gradients  grids  hamburger  hidden  history  hosting  html  icons  iframes  inputs  internationalization  jamstack  javascript  keyframes  label  layout  learning  line-clamp  lines  links  lists  localization  magazine  maps  margins  mediaqueries  mobile  movies  netlify  not  null  onclick  optimization  optional  options  overflow  padding  paper  patternlibrary  performance  position  preconnect  print  programming  pseudo-elements  px  recipes  reduced-motion  responsive  sass  screenreaders  scroll  scrollbars  search  security  select  semantics  seo  sidebars  snow  specificity  specs  splitting  sticky  styleguide  support  supports  svg  svgo  tables  testing  text-decoration  text-overflow  textarea  tokens  tools  tooltips  transition-delay  transitions  translation  truncate  typography  ui  underline  units  utility  ux  variables  video  x11  youtube 

Copy this bookmark: