34

The new <kbd> CSS is not loading for some users. So, for those who just can't wait, use your favorite CSS browser extension/feature to implement it yourself!

kbd
{
    -moz-border-radius:3px;
    -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    background-color:#f7f7f7;
    border:1px solid #ccc;
    border-radius:3px;
    box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    color:#333;
    display:inline-block;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    line-height:1.4;
    margin:0 .1em;
    padding:.1em .6em;
    text-shadow:0 1px 0 #fff;
}

Credit: @jin

1
  • 7
    AWESOME!! Me likey!
    – studiohack
    May 5, 2012 at 18:30

3 Answers 3

12

kbd

1
  • 3
    +1 for the time spent creating this layout.
    – ShooShoSha
    Sep 6, 2017 at 19:58
12

This post is used for testing purposes; if you somehow don't have the new CSS (after doing a cache refresh like CTRL+F5) you can use an extension like Stylebot for Chrome and copy iglvzx's CSS into it.

I'm unaware of such add-on for Firefox, so they might need to write an user style sheet or write a GM user script to insert a <style> tag. For Internet Explorer there is Trixie for running GM user scripts. Note that this should only be used as a temporary fix if you just can't wait...

A keyboard, as can be seen in iglvzx's post, but with <kbd> tags:

`1234567890-=Bkspc

Tabqwertyuiop[]\

Capsasdfghjkl;'Enter

Shiftzxcvbnm,./Shift

And now for some bug tests:

***************************************************************************************************************************************************************************************************************************************************************************************************************************

However, image bugs seems to have been fixed:

5
  • 9
    You broke the Internet again!
    – iglvzx
    May 5, 2012 at 18:41
  • 1
    @iglvzx: Seems the images bug has been resolved, the other two bugs are still there. Breaking it another time: `````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````` And well, the quote bug is also still there but irrelevant to post it here... :) May 5, 2012 at 18:42
  • How do you think they should be fixed? See my quick CSS fix on my other answer.
    – iglvzx
    May 5, 2012 at 20:09
  • My god, how did I miss that Lion King reference!?
    – iglvzx
    May 5, 2012 at 20:24
  • See my response to your other answer. May 5, 2012 at 21:31
2

In response to @Tom's bugs, the following CSS is a basic fix:

kbd
{
  max-width: 624px;
  overflow: auto;
}

Before:

before

After:

after

2
  • Yeah, similar fixes were already suggested on Meta.SO which also fix the quote bug; but I've yet to see one for the comment bug. In any case, introducing automatic wrapping / scrolling in case of bugs isn't a bad idea. May 5, 2012 at 21:30
  • Ha! I've fixed the comment bug. I will post on Meta.SO :)
    – iglvzx
    May 5, 2012 at 21:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .