This is a very interesting question. I’ve always put my CSS <link href=”…”>s before my JavaScript <script src=”…”>s because “I read one time that it’s better.” So, you’re right; it’s high time we do some actual research! I set up my own test harness in Node.js (code below). Basically, I: Made sure there was no … Read more
You don’t need JavaScript for this! Here is a cross-browser solution: See this example! – It works in Chrome/FF/IE – (IE10/9/8/7) The best approach would be to have a custom label element with a for attribute attached to a hidden file input element. (The label’s for attribute must match the file element’s id in order … Read more
It is impossible to change the format We have to differentiate between the over the wire format and the browser’s presentation format. Wire format The HTML5 date input specification refers to the RFC 3339 specification, which specifies a full-date format equal to: yyyy-mm-dd. See section 5.6 of the RFC 3339 specification for more details. This … Read more
Methods for Aligning Flex Items along the Main Axis As stated in the question: To align flex items along the main axis there is one property: justify-content To align flex items along the cross axis there are three properties: align-content, align-items and align-self. The question then asks: Why are there no justify-items and justify-self properties? … Read more
Wow, this problem is popular. It’s based on a misunderstanding in the vertical-align property. This excellent article explains it: Understanding vertical-align, or “How (Not) To Vertically Center Content” by Gavin Kistner. “How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations. In a … Read more
One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported): div ul:not(:first-child) { background-color: #900; } If you need to support legacy browsers, or if you are hindered by the :not selector’s limitation (it only accepts a simple selector as an argument) then you can use … Read more
UPDATE: The below answer references the state of things before widespread availability of CSS 3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using JavaScript. Here are some useful links: Creating Custom Form Checkboxes with Just CSS Easy CSS Checkbox Generator Stuff … Read more
Try setting the height of the html element to 100% as well. html, body { height: 100%; } Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting … Read more
The ~ selector is in fact the subsequent-sibling combinator (previously called general sibling combinator until 2017): The subsequent-sibling combinator is made of the “tilde” (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the … Read more
Angular version 2+ provides several ways to add classes conditionally: type one [class.my_class] = “step === ‘step1′” type two [ngClass]=”{‘my_class’: step === ‘step1’}” and multiple option: [ngClass]=”{‘my_class’: step === ‘step1’, ‘my_class2’ : step === ‘step2’ }” type three [ngClass]=”{1 : ‘my_class1’, 2 : ‘my_class2’, 3 : ‘my_class4’}[step]” type four [ngClass]=”step == ‘step1’ ? ‘my_class1’ : … Read more