vaupeh + css   152

Should I Use JavaScript to Load My Web Fonts?
When they were first introduced, web fonts were primarily a CSS feature, and for many web developers they’ve always loaded them using CSS (and nothing more). But in the last decade, default web font loading behavior in many browsers made CSS-only methods a gamble with our page’s text render, and thoughtful developers switched to safer JavaScript methods. Recently, browser support for new and safer CSS-only strategies have left some developers wondering: are JavaScript methods to load web fonts necessary? Are they useful? Let’s dig in.
webfont  webfonts  webdesign  webdev  webdevelopment  font  Javascript  CSS 
6 weeks ago by vaupeh
Solved with CSS! Logical Styling Based on the Number of Given Elements
An in-depth look into the amazing possibilities of nth-child
august 2018 by vaupeh
A Strategy Guide To CSS Custom Properties
CSS Custom Properties (sometimes known as ‘CSS variables’) are now supported in all modern browsers, and people are starting to use them in production. This is great, but they’re different from variables in preprocessors, and I’ve already seen many examples of people using them without considering what advantages they offer.

Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. I’m not going to focus on the syntax and how they work (for that I recommend you read “It’s Time To Start Using Custom Properties”). Instead, I want to take a deeper look at strategies for getting the most out of CSS Custom Properties.
css  css-variables  css-custom-properties 
may 2018 by vaupeh
CSS Grid — Responsive layouts and components
Let’s make a photo gallery responsive quickly and using very few lines of CSS.
CSS  grid  grid-layout  image-gallery  responsive 
may 2018 by vaupeh
The Front-End Checklist
The Front-End Checklist Application is perfect for modern websites and meticulous developers!
checklist  cheatsheet  frontend  resources  html  css  Javascript 
april 2018 by vaupeh
Collection of CSS snippets
Some time ago I asked on twitter about the favorite CSS snippets people use regularly.
CSS  snippet  snippets  toolbox 
april 2018 by vaupeh
What no one told you about z-index
Deep dive into the stacking of HTML elements
CSS  z-index 
march 2018 by vaupeh
30 Seconds of CSS
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
CSS  snippet 
march 2018 by vaupeh
Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges
Concise examples what to achieve with the nth-child CSS selector
CSS  nth-child 
february 2018 by vaupeh
« earlier      
per page:    204080120160

related tags

a11y  absolute  accessibility  adaptive  addon  alternatives  animation  architecture  aria  aria-roles  atomic  atomiccss  background  background-image  bem  best-practice  best-practise  bestpractice  bestpractices  blog  boilerplate  bootstrap  border  breakpoint  bringhurst  broken-image  browser  browser-bug  bug  bugs  button  buttons  calculator  center  centering  cheatsheet  checkbox  checklist  clear  clearfix  code  codestandards  collapse  collapsing-margins  color  colored  columns  comparison  compatibility  component  css  css-custom-properties  css-variables  css3  custom  data-uri  design  development  documentation  Drupal  e-mail  eclipse  editor  element  elements  ellipsis  em  em-square  email  emulate  example  explorer  external  fallback  filter  firefox  flex  flexbox  flexible  float  font  font-loading  fonts  form  forms  foundation  framework  frontend  gap  generator  gmail  google  gradient  grid  grid-layout  guide  guidelines  hack  hacks  haslayout  height  Helpers  horizontal  houdini  hover  howto  html  html-email  html5  icon  icons  ie  ie6  ie7  ie8  image  image-gallery  images  important  in-depth  inline  inline-block  inline-element  internet  javascript  jquery  js  layout  line-height  linux  magento  mail  mailclient  margin  marketing  max-width  mediaqueries  mediaquery  min-width  mobile  modular  modules  multiline  newsletter  nth-child  oo-css  oocss  optimization  overflow  pattern  performance  plugin  plugins  polyfill  position:  positioning  postioning  profiling  pseudo-element  radiobutton  radiobuttons  reading-list  reference  resizable  resources  responsive  ressourcen  rgba  roles  schriftgrad  search  selectors  semantic  semantic-html  smacss  snippet  snippets  specifity  sprites  stackingorder  standards  stick-header  sticky  sticky-header  style  styleguide  stylesheet  stylesheets  styling  svg  tabelle  table  templates  text  text-overflow  the  theme  themes  tips  tool  toolbox  tools  tooltips  touch  touch-device  truncation  tutorial  type  typographic  typography  usability  vector  vertical  vertical-align  visual  web  web-development  webdesign  webdev  webdevelopment  webentwicklung  webfont  webfonts  windows-10  windows-mail  z-index  z-index-bug  zen  zindex 

Copy this bookmark: