4ae9b8/browserhacks

An extensive list of CSS/JS browserhacks from all over the interwebs.

browserhacks's Issues

Add awesome quotes

A place to display awesome quotes.

Optimize performance

Kind of slow right now. Let's try to make the beast faster.

1. How do we manager images (avatars)? There are a bunch of them, should we make a sprite and use background-image instead of ?
2. PageSpeed Insights doesn't seem to see any gzipped content. However http://gzipwtf.com/ says the .css file is properly gzipped. Mystery to be solved.
3. main.js should probably be minified.

Handle "+" and "-" in browser version

Example: Firefox 3.5+

The version of a hack is 3.5+. So when you search for 5, the expected result would be every hack with version 5 and all hacks with version 3.5.

Currently there is no result for Firefox 5.

Mobile browsers

Add mobile browsers hacks.

Handle "no result" in search

Display something nice:

• Funny message
• "404 Not found" - something
• Emoticon
• <your suggestion here?>
• Ban tim's ip

Handle better no result found

When no result found, there are still the headers ("JavaScript hacks", "Media hacks", etc.).

Update the Google Chrome logo

Just update the logo.

Test page down

Can't reach test.browserhacks.com anymore.

Make a new favicon

We need a new favicon.

Search for...

• Browser
• Maybe hack?

CSS Spriting error on mobile

Both the IE and the Firefox icon are shown on mobile due to the line wrap.

Wrong results for version search

Searching for "Opera 7", gives "Opera 9.27" as a result.

Further testing

We need to know more about which versions of Safari are hacked by:

::made-up-pseudo-element, .selector {}

Safari 6: to be tested.
Safari 5: OK.
Safari 4: to be tested.
Safari 3: to be tested.
Safari 2: to be tested.

Reduce the size of browser-logos.png

The browser-logos.png is currently 296.08 KB big. This is too much. We need to optimize it in some way:

• Reduce file size
• Reduce icon size

Add @2x background image

Add a @2x image for this (http://preview.browserhacks.com/img/linedpaper.png) background image and show it on retina displays.

Make a BH twitter account

Good idea? Bad idea?

Sprite problem on small screens

http://imgur.com/YTyd9LD

Sort browsers alphabetically

Since most people will look for a IE hack, I think IE should be the first in the list.

Do we need "Order by: browsers, type."?

Do we really need this option? My point of view: Keep it simple. The search is enough for me.

What do you think?

Add Google Analytics

I created a new account for BH which needs to be added before we go live. I will give full access to 4ae9b8 members.

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-38522111-1']);
  _gaq.push(['_setDomainName', 'browserhacks.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Loading jQuery

Why aren't we loading jQuery from Google CDN?

"Everything but..." hacks

I think hacks targeting "everything but..." should be considered as another whole thing. To be discussed.

Check the hack reference from Deepak

Sara dropped this link: http://www.deepakmishra.name/post/39760396488/browser-css-hacks

To be checked...

Replace entypo with another icon font

entypo doesn't work properly on every device/browser/os combination. We should replace it with another Icon Fonts (e.g. Fontawesome or what ever you want)

Add the "new" rotating catch phrase to the test page

The test page needs the new rotating catch phrase from #27 too.

The rotating catch phrase

Might want do replace the JS based animation with a CSS on:

http://codepen.io/FWeinb/pen/80acf062c1e953947be570717a801bc4

JavaScript hacks

Make JS hacks work in the test page.

Make site IE compatible

Currently unusable in IE6, IE7 and IE8. The later should be compatible.

Merge home page and test page

What if we merged both? We run the tests on the home page directly.

Any thought?

Advanced search

Something with checkboxes would be great. Advices & comments welcome.

• Add a "type" filter.

Change page background

Not much to say here. The background looks out of proportion and kinda blurry, there are tons of better ones, so I'd suggest changing it...

Working hacks first

From a UX perspective.. if I open the BH in a browser, I would first like to see all hacks that DO work in the browser I'm viewing, taking into consideration the version as well.. and maybe be given an option to see all hacks that don't work. Having to look for the hacks that doesn't work isn't nice UX.

For example I don't wanna have to keep scrolling down "looking for" hacks that worked. So it would be great, to kinda like FILTER the hacks for each browser: at top: the ones that work, at bottom: the ones that didn't work/match.

Hack fixing

Chrome 24-.

/* Safari (version?) and Chrome (not Canary) */
::made-up-pseudo-element, .selector { background: lightgreen; }

Add link to Twitter

Now we have a dedicated Twitter account, we should put a link to it on the home page.

Add a preview page

Would be nice to have a page like preview.browserhacks.com so that people can review the site and are not forced to git/server/what ever on their local machine.

Jump to specific browser via navigation?

Would be awesome to some kind of "jump" to a specific browser. Or is the search the only navigation element?

Old chrome logo

The Chrome logo on the site is old. Quick fix.

Copy To Clipboard

What about a little "Copy to clipboard" button for each snippet? I don't know if it worth it. Any thought?

Reference Firefox as "FF"

Mozilla Firefox should also be referenced as "ff".

"Find a hack" label clicked twice + buttons

When you click the label Find a hack once, the buttons on the right are hidden. When you click the label one more time, the buttons are shown beneath the search field.

Searching for a number

Searching for a number should return either:

• no result
• hacks targeting a browser version equals of this number

Currently, searching for a number doesn't do anything.

Secret Chat System For Tim And I

Ok, the rest of the #4ae9b8 team is allowed too D:

Problem with the JS hack for Safari 6.0.2

Is'nt in the green for Safari Version 6.0.2 (8536.26.17) on OSX 10.8.2

var isSafari = /a/.proto=='//';

Browser bar is broken on retina Mac's

The image sprite for retina Macs is kinda broken. Screenshot:

New hacks

To be tested:

/* IE 10 */
(function() {
  "use strict";
  var tmp = (document["documentMode"] || document.attachEvent) && "ev",
       msie = tmp 
                  && (tmp = window[tmp + "al"])
                  && tmp("/*@cc_on 1;@*/")
                  && +((/msie (\d+)/i.exec(navigator.userAgent) || [])[1] || 0);
  return msie || void 0;
})();

Source JS: http://www.jquery4u.com/browsers-2/check-ie-version/
To be tested:

/* IE 10 */
navigator.msMaxTouchPoints

Add a description to the test page

Describe what the green and red background means.

JavaScript hack "isSafari" not working on newer Safari.

On newer Safari versions /a/.__proto__ returns /(?:)/, the same for Google Chrome, Firefox and Opera. So doing that check will not tell if it is Safari.

Can't say if this will work on all versions of Safari (tested on 4.0.5 and 6.0.2) and on iOS (3.0, 4.0, 5.1, 6.0).

var isSafari = /Constructor/.test(window.HTMLElement);

Test page at test.browserhacks.com

What about moving the test page to test.browserhacks.com?

Sort the browser on the test page alphabetically

The browser on the test page should be sorted alphabetically to be consistent with the main page.

Why? #23

Check the hack reference from ginader

https://github.com/ginader/CSS-Hacks