recentpopularlog in

inxilpro : link   12

Table with Expando Rows
"Expando Rows&quot; is a concept where multiple related rows in a <table> are collapsed until you open them. You'd call that &quot;progressive disclosure&quot; in interaction design parlance.
After all these years on CSS-Tricks, I have a little better eye for what the accessibility concerns of a design/interactivity feature are. I'm not entirely sure how I would have approached this problem myself, but there is a good chance that whatever I would have tried wouldn't have hit the bullseye with accessibility. … Read article
The post Table with Expando Rows appeared first on CSS-Tricks.
Link  accessibility  tables 
23 days ago by inxilpro
Self-Host Your Static Assets
Harry Roberts digs into why hosting assets on someone else’s servers (including CDNs) is not such a great idea if we want our websites to be lightning fast.
Harry writes:

One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure.

I think perhaps the most shocking example Harry shows is this one:

...on a reasonably

… Read article
The post Self-Host Your Static Assets appeared first on CSS-Tricks.
Link  hosting  performance 
june 2019 by inxilpro
CSS Remedy
There is a 15-year history of CSS resets. In fact, a "reset&quot; isn't really the right word. Tantek Çelik's take in 2004 was called &quot;undohtml.css&quot; and it wasn't until a few years later when Eric Meyer called his version a reset, that the word became the default term. When Normalize came around, it called itself a reset alternative, which felt right, because it wasn't trying to obliterate all styles, but instead bring the base styles that browsers … Read article
The post CSS Remedy appeared first on CSS-Tricks.
Link  normalize  reset  user  agent  stylesheets 
march 2019 by inxilpro
Styling a Select Like It’s 2019
It's rather heartwarming to know you can style a <select> in a rather cross-browser friendly way that doesn't hurt accessibility. Kudos for documenting this Scott!
See the Pen Styled &lt;select� by Chris Coyier (@chriscoyier) on CodePen.
Direct Link to Article — Permalink…
The post Styling a Select Like It’s 2019 appeared first on CSS-Tricks.
Link  forms  select 
january 2019 by inxilpro
How to create a logo that responds to its own aspect ratio
One of the cool things about <svg> is that it's literally its own document, so @media queries in CSS inside the SVG are based on its viewport rather than the HTML document that likely contains it.
This unique feature has let people play around for years. Tim Kadlec experimented with SVG formats and which ones respect the media queries most reliably. Sara Soueidan experimented with that a bunch more. Jake Archibald embedded a canvas inside and tested cross-browser compatibility that …
The post How to create a logo that responds to its own aspect ratio appeared first on CSS-Tricks.
Link  media  queries  SVG 
july 2018 by inxilpro
Crafting Webfont Fallbacks
There is a great bit in here where Glen uses Font Style Matcher to create some CSS for a fallback font that has font-size, line-height, font-weight, letter-spacing, and word-spacing adjusted so perfectly that when the web font does load, the page hardly shifts at all. Like barely noticeable FOUT. Maybe we'll call it FOCST (Flash of Carefully Styled Text).
Direct Link to Article — Permalink…

Crafting Webfont Fallbacks is a post from CSS-Tricks
Link  web  fonts 
august 2017 by inxilpro
Poly Fluid Sizing
Fluid typography is pretty amazing. We have a writeup of how it all works. But as fancy as that is, it's still scaling the type linearly. What if we wanted the type size to fall along a curve? The math gets a bunch more complicated, but it's possible.
Jake Wilson digs in, and while he finds that calc() isn't quite up for the job (e.g. font-size: calc(3vw * 3vw); /* This doesn't work in CSS */), he does land …

Poly Fluid Sizing is a post from CSS-Tricks
Article  Link  fluid  type 
april 2017 by inxilpro
Etsy’s Evolving Icon System
Etsy moves away from an icon font in production to using SVG. It's going to be an inline <svg> system, but abstracted as a &lt;etsy-icon> custom element for ease of use.
Two cents:

I could see the need for that abstraction going away if we had a more convient syntax for &lt;use> available, like: &lt;svg use="icons.svg#cart&quot; />
I like how dedicated they are to icon consistency. I struggle with this a lot. An SVG icon process can be so easy

Etsy’s Evolving Icon System is a post from CSS-Tricks
Link  icons  SVG 
january 2017 by inxilpro
Improving Your CSS with Parker
Harry Roberts has written about Parker, a stylesheet analysis tool by Katie Fenn. He explains why using tools like Parker are wonderfully helpful to developers:
I use Parker almost daily, and regularly go through it with my clients and workshop attendees. Parker surfaces some really interesting numbers, and if you know what they represent, you can draw some really valuable insights about your CSS from them.
Harry also describes a very important reason as to why developers might use …

Improving Your CSS with Parker is a post from CSS-Tricks
Link  css  analysis  harry  roberts  katie  fenn  parker 
june 2016 by inxilpro
Using jQuery Visited Plug-In.
9lessons is a programming blog maintained by Srinivas Tamada. Topics focus on Programming, Jquery, Ajax, PHP, Demos, Web Design, Javascript and MySQL
jquery  javascript  visited  css  link  plugins  ajax  links  webdev 
october 2009 by inxilpro
Remove the outline from links on :active only | 456 Berea Street
Completely removing the outline from links makes it very difficult for people who do not use a mouse to see where the keyboard focus is. But there is a better way.
css  accessibility  links  outline  link  webdesign  html  usability 
october 2009 by inxilpro

Copy this bookmark:

to read