The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they’re looking for without having to sift through … Read more
It is up to the browser but they behave in similar ways. F5 usually updates the page only if it is modified. Modern browsers sends Cache-Control: max-age=0 to tell any cache the maximum amount of time a resource is considered fresh, relative to the time of the request. CTRL–F5 is used to force an update, … Read more
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
A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn’t editable and isn’t sent on submit. Another difference is that readonly elements can be focused (and getting focused when “tabbing” through a form) while disabled elements can’t. Read more about this in this great article or … Read more
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
Cross-browser @media (width) and @media (height) values const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) window.innerWidth and window.innerHeight gets CSS viewport @media (width) and @media (height) which include scrollbars initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls … Read more
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
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
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
Warning! This answer is too old and doesn’t work on modern browsers. I’m not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it’s still marked as accepted answer (probably because the original poster of … Read more