Articles
7915 Articles
How I Think Posting HTML In Comments Should Work
People post a good bit of HTML in the comments of articles on this site. They are trying to demonstrate something, ask for troubleshooting help, show alternate techniques, etc. This is excellent. I want to encourage this as much as …
Chris Coyier
on
Add Data Attribute of User Agent
var b = document.documentElement;
b.className = b.className.replace('no-js', 'js');
b.setAttribute("data-useragent", navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );Which results in data attributes being added to the html element like:
<html
data-useragent="Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR
Chris Coyier
on
(Updated on )
Triangular List Bullets
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li::before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}That’s a …
Chris Coyier
on
(Updated on )
A Really Nice Way To Handle Popup Information
Showing additional info ("popup") when hovering over an element is a pretty easy thing to do. But there is a ton of subtle ways to improve that interaction. This articles goes over a really excellent technique for this covered by Doug Neiner at the Front End Design Conference 2011.
Chris Coyier
on
(Updated on )
Blogging. You can do better.
That’s my (solo) panel name for SXSW Interactive 2011. I’ll love you forever if you upvote it to increase my chances of getting to do it this year. It was denied city last year. I haven’t talked much about blogging …
Shared by
Chris Coyier
on
Force an Iframe to Reload
You can touch the src of it:
$('iframe').attr('src', $('iframe').attr('src'));
Chris Coyier
on
(Updated on )
#100
I finally shot the 100th video. No big fireworks, just more front end learnin’! In this one we look at a Photoshop design and mark it up in HTML5 as semantically as we can.…
Shared by
Chris Coyier
on
(Updated on )
#100: Let’s Write Semantic Markup
We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up. We don’t …
Chris Coyier
on
(Updated on )
iPhone Calling and Texting Links
This is the calling one (probably more useful if the clickable text is words, as the iPhone auto-detects phone numbers and does this automatically):
<a href="tel:1-408-555-5555">1-408-555-5555</a>This is the SMS one, which overrides the default calling behavior:
<a href="sms:1-408-555-1212">New SMS
Chris Coyier
on
(Updated on )