cross-browser - w3toppers.com

CSS technique for a horizontal line with words in the middle

This is roughly how I’d do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background. h2 { width: 100%; text-align: center; border-bottom: 1px solid #000; line-height: 0.1em; margin: 10px 0 20px; … Read more

Are the PUT, DELETE, HEAD, etc methods available in most web browsers?

No. The HTML 5 spec mentions: The method and formmethod content attributes are enumerated attributes with the following keywords and states: The keyword get, mapping to the state GET, indicating the HTTP GET method. The GET method should only request and retrieve data and should have no other effect. The keyword post, mapping to the … Read more

‘innerText’ works in IE, but not in Firefox

Update: I wrote a blog post detailing all the differences much better. Firefox uses W3C standard Node::textContent, but its behavior differs “slightly” from that of MSHTML’s proprietary innerText (copied by Opera as well, some time ago, among dozens of other MSHTML features). First of all, textContent whitespace representation is different from innerText one. Second, and … Read more

How do I style a dropdown with only CSS?

Here are three solutions: Solution #1 – appearance: none – with Internet Explorer 10 – 11 workaround (Demo) — To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Remove default arrow */ background-image: url(…); /* Add custom … Read more

What is JavaScript’s highest integer value that a number can go to without losing precision?

JavaScript has two number types: Number and BigInt. The most frequently-used number type, Number, is a 64-bit floating point IEEE 754 number. The largest exact integral value of this type is Number.MAX_SAFE_INTEGER, which is: 253-1, or +/- 9,007,199,254,740,991, or nine quadrillion seven trillion one hundred ninety-nine billion two hundred fifty-four million seven hundred forty thousand … Read more

What is a clearfix?

If you don’t need to support IE9 or lower, you can use flexbox freely, and don’t need to use floated layouts. It’s worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives. display: inline-block – Better Flexbox – Best (but limited browser … Read more

Get the size of the screen, current web page and browser window

You can get the size of the window or document with jQuery: // Size of browser viewport. $(window).height(); $(window).width(); // Size of HTML document (same as pageHeight/pageWidth in screenshot). $(document).height(); $(document).width(); For screen size you can use the screen object: window.screen.height; window.screen.width;