JSFiddle

boblet's public fiddles

• CpDKg

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Two-tone background using inset box-shadow

  box-shadow: inset 0 [half-height] 0 0 rgba(255, 255, 255, 0.1) (from @leaverou via @jon_neal)

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Wrapping long table cell content

  table-layout:fixed; plus some column widths to the rescue

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Animations & transitions

  plus, playing with SCSS ref: http://tinkerbin.com/tw7L8kUt

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Faking display:none + transitions

  …using opacity and margin-top (display isn’t transitionable, but these are)

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Chrome backface-visibility troubleshooting

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Looking for a filter for IE8 complex media query rules

  IE6(/7?) are fine with `@media screen {}` and `@media print {}`. However IE6(/7?) ignore complex media query rules after this, e.g. anything in […] is ignored in this example `@media screen, […] {}` If we had some way to make IE8 ignore complex media query rules (that also works for IE6-7), we could use it to serve a single mobile-first CSS file to all browsers while still giving IE6-8 media queried desktop styles PLZ FIND THAT WAY

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Animating the auto value

  Mozilla follows the specs in only allowing length and percentage values of left to be animated. WebKit allows auto values to be animated too.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Broken line-height on input

  Firefox and Opera don’t support line-height on input, making cross-platform buttons using input a nightmare. Ref: https://bugzilla.mozilla.org/show_bug.cgi?id=349259

• Private fiddle Extra
• Delete fiddle
Groups Extra
• transform:rotate() and link :hover bug in Opera

  :hover styles are only applied to part of the link containing a rotated ★, with the area and application a little buggy

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Safari 5.1 fieldset :focus bug

  inputs inside a relatively positioned container inside a fieldset with an rgba(255,255,255,<1) outline get a gray or black background on :focus, and occasionally extra weirdness (blue, black, half black/half white) Not present in current WebKit nightly or in pre-Lion Safari 5.0

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Opera quotes property bug

  No-Library (pure JS), HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Traditional blockquote styles

  opening quotemark on each paragraph, but closing only on last paragraph

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Smart quotes for pre-2011 Webkit

  Testing a couple of workarounds for Webkit’s hard coding of "" '' style quotes pre-Safari 5.1

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Browser support for nested quotes

  testing browser support for the quotes property with <q>

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Nested inline quotations

  What CSS will let language-specific nested <q> work correctly? ref: http://dev.w3.org/csswg/css3-content/#inserting-quotes-with-the-content-proper

• Private fiddle Extra
• Delete fiddle
Groups Extra
• :nth-child(2) example

  p:first-child selects for any p that is the first child of its parent p:first-of-type selects for the first p even if it’s not the first child p:nth-child(2) selects for any p that is the 2nd child of its parent

• Private fiddle Extra
• Delete fiddle
Groups Extra
• line-height issue in Opera and Chrome

  Chrome and Opera seem to have conflicting bugs: line-height compounding (?) in Opera, but adding line-height:0; positions the star too low in Chrome. hacky workaround is use line-height:0; and set explicit height to fix Chrome. Safari and Firefox fine for both

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Bug report: transform plus inline-level elements

  for https://bugs.webkit.org/show_bug.cgi?id=58965

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Small flower patterns with background gradients

  Small flower patterns, inspired by http://leaverou.me/css3patterns see https://gist.github.com/923310 for unprefixed ver

• Private fiddle Extra
• Delete fiddle
Groups Extra