Last active
April 30, 2018 17:35
-
-
Save sasikanth513/31ae53f3a27f28b65c7ead3cceb38eb7 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "Author": "stackoverflow", | |
| "url": "https://stackoverflow.com", | |
| "format": "html", | |
| "tips": [ | |
| { | |
| "title": "How to disable text selection highlighting?", | |
| "body": "<p><strong>UPDATE January, 2017:</strong></p>\n\n<p>According to <a href=\"http://caniuse.com/#feat=user-select-none\" rel=\"noreferrer\">Can I use</a>, the <code>user-select</code> is currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly <em>still</em> needs a vendor prefix).</p>\n\n<hr>\n\n<p>All of the correct CSS variations are:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.noselect {\r\n -webkit-touch-callout: none; /* iOS Safari */\r\n -webkit-user-select: none; /* Safari */\r\n -khtml-user-select: none; /* Konqueror HTML */\r\n -moz-user-select: none; /* Firefox */\r\n -ms-user-select: none; /* Internet Explorer/Edge */\r\n user-select: none; /* Non-prefixed version, currently\r\n supported by Chrome and Opera */\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><p>\r\n Selectable text.\r\n</p>\r\n<p class=\"noselect\">\r\n Unselectable text.\r\n</p></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<p>Note that it's a <strong>non-standard feature</strong> (i.e. not a part of any specification). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.</p>\n\n<hr>\n\n<p>More information can be found in <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/user-select\" rel=\"noreferrer\">Mozilla Developer Network documentation</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 826782 | |
| }, | |
| { | |
| "title": "Change an HTML5 input's placeholder color with CSS", | |
| "body": "<h2>Implementation</h2>\n\n<p>There are three different implementations: pseudo-elements, pseudo-classes, and nothing.</p>\n\n<ul>\n<li>WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: <code>::-webkit-input-placeholder</code>. <sup>[<a href=\"https://bugs.webkit.org/show_bug.cgi?id=21227\" rel=\"noreferrer\">Ref</a>]</sup></li>\n<li>Mozilla Firefox 4 to 18 is using a pseudo-class: <code>:-moz-placeholder</code> (<em>one</em> colon). <sup>[<a href=\"https://developer.mozilla.org/en/CSS/:-moz-placeholder\" rel=\"noreferrer\">Ref</a>]</sup></li>\n<li>Mozilla Firefox 19+ is using a pseudo-element: <code>::-moz-placeholder</code>, but the old selector will still work for a while. <sup>[<a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-moz-placeholder\" rel=\"noreferrer\">Ref</a>]</sup></li>\n<li>Internet Explorer 10 and 11 are using a pseudo-class: <code>:-ms-input-placeholder</code>. <sup>[<a href=\"http://msdn.microsoft.com/en-us/library/ie/hh772745(v=vs.85).aspx\" rel=\"noreferrer\">Ref</a>]</sup></li>\n<li>April 2017: <strong>Most modern browsers support the simple pseudo-element <code>::placeholder</code> <sup>[<a href=\"https://caniuse.com/#feat=css-placeholder\" rel=\"noreferrer\">Ref</a>]</sup></strong></li>\n</ul>\n\n<p>Internet Explorer 9 and lower does not support the <code>placeholder</code> attribute at all, while <a href=\"http://web.archive.org/web/20131206060908/http://my.opera.com/community/forums/topic.dml?id=841252&t=1296553904&page=1#comment8072202\" rel=\"noreferrer\">Opera 12 and lower do not support</a> any CSS selector for placeholders.</p>\n\n<p>The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the <a href=\"http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/\" rel=\"noreferrer\">Shadow DOM</a>. A <code>padding</code> on an <code>input</code> will not get the same background color as the pseudo-element.</p>\n\n<h2>CSS selectors</h2>\n\n<p>User agents are required to ignore a rule with an unknown selector. See <a href=\"http://www.w3.org/TR/selectors/#Conformance\" rel=\"noreferrer\">Selectors Level 3</a>:</p>\n\n<blockquote>\n <p>a <a href=\"http://www.w3.org/TR/selectors/#grouping\" rel=\"noreferrer\">group</a> of selectors containing an invalid selector is invalid.</p>\n</blockquote>\n\n<p>So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>::-webkit-input-placeholder { /* WebKit, Blink, Edge */\r\n color: #909;\r\n}\r\n:-moz-placeholder { /* Mozilla Firefox 4 to 18 */\r\n color: #909;\r\n opacity: 1;\r\n}\r\n::-moz-placeholder { /* Mozilla Firefox 19+ */\r\n color: #909;\r\n opacity: 1;\r\n}\r\n:-ms-input-placeholder { /* Internet Explorer 10-11 */\r\n color: #909;\r\n}\r\n::-ms-input-placeholder { /* Microsoft Edge */\r\n color: #909;\r\n}\r\n\r\n::placeholder { /* Most modern browsers support this now. */\r\n color: #909;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><input placeholder=\"Stack Snippets are awesome!\"></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<h2>Usage notes</h2>\n\n<ul>\n<li>Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use <code>opacity: 1</code> here.</li>\n<li>Note that placeholder text is just cut off if it doesn’t fit – size your input elements in <code>em</code> and test them with big minimum font size settings. Don’t forget translations: some languages <a href=\"http://www.w3.org/International/articles/article-text-size.en\" rel=\"noreferrer\">need more room</a> for the same word. </li>\n<li>Browsers with HTML support for <code>placeholder</code> but without CSS support for that (like Opera) should be tested too.</li>\n<li>Some browsers use additional default CSS for some <code>input</code> types (<code>email</code>, <code>search</code>). These might affect the rendering in unexpected ways. Use the <a href=\"https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance\" rel=\"noreferrer\">properties</a> <code>-webkit-appearance</code> and <code>-moz-appearance</code> to change that. Example:</li>\n</ul>\n\n<pre class=\"lang-css prettyprint-override\"><code> [type=\"search\"] {\n -moz-appearance: textfield;\n -webkit-appearance: textfield;\n appearance: textfield;\n }\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 2610497 | |
| }, | |
| { | |
| "title": "How to horizontally center a &amp;amp;amp;lt;div&amp;amp;amp;gt; in another &amp;amp;amp;lt;div&amp;amp;amp;gt;?", | |
| "body": "<p>You can apply this CSS to the inner <code><div></code>:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>#inner {\n width: 50%;\n margin: 0 auto;\n}\n</code></pre>\n\n<p>Of course, you don't have to set the <code>width</code> to <code>50%</code>. Any width less than the containing <code><div></code> will work. The <code>margin: 0 auto</code> is what does the actual centering.</p>\n\n<p>If you are targeting IE8+, it might be better to have this instead:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>#inner {\n display: table;\n margin: 0 auto;\n}\n</code></pre>\n\n<p>It will make the inner element center horizontally and it works without setting a specific <code>width</code>.</p>\n\n<p>Working example here:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#inner {\r\n display: table;\r\n margin: 0 auto;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div id=\"outer\" style=\"width:100%\">\r\n <div id=\"inner\">Foo foo</div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 114543 | |
| }, | |
| { | |
| "title": "Set cellpadding and cellspacing in CSS?", | |
| "body": "<p><strong>Basics</strong></p>\n\n<p>For controlling \"cellpadding\" in CSS, you can simply use <code>padding</code> on table cells. E.g. for 10px of \"cellpadding\":</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>td { \n padding: 10px;\n}\n</code></pre>\n\n<p>For \"cellspacing\", you can apply the <code>border-spacing</code> CSS property to your table. E.g. for 10px of \"cellspacing\":</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>table { \n border-spacing: 10px;\n border-collapse: separate;\n}\n</code></pre>\n\n<p>This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school \"cellspacing\".</p>\n\n<p><strong>Issues in IE <= 7</strong></p>\n\n<p>This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say \"almost\" because these browsers still support the <code>border-collapse</code> property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, <code>cellspacing=\"0\"</code>) then <code>border-collapse:collapse</code> should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing <code>cellspacing</code> HTML attribute on the table element.</p>\n\n<p>In short: for non-Internet Explorer 5-7 browsers, <code>border-spacing</code> handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use <code>border-collapse:collapse</code>.</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>table { \n border-spacing: 0;\n border-collapse: collapse;\n}\n</code></pre>\n\n<p>Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this <a href=\"http://www.quirksmode.org/css/tables.html\" rel=\"noreferrer\">fantastic Quirksmode page</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 339923 | |
| }, | |
| { | |
| "title": "Is there a CSS parent selector?", | |
| "body": "<p>There is currently no way to select the parent of an element in CSS.</p>\n\n<p>If there was a way to do it, it would be in either of the current CSS selectors specs:</p>\n\n<ul>\n<li><a href=\"http://www.w3.org/TR/css3-selectors/#selectors\" rel=\"noreferrer\">Selectors Level 3 Spec</a></li>\n<li><a href=\"http://www.w3.org/TR/CSS2/selector.html#pattern-matching\" rel=\"noreferrer\">CSS 2.1 Selectors Spec</a></li>\n</ul>\n\n<p>In the meantime, you'll have to resort to JavaScript if you need to select a parent element.</p>\n\n<hr>\n\n<p>The <a href=\"http://dev.w3.org/csswg/selectors4/#relational\" rel=\"noreferrer\">Selectors Level 4 Working Draft</a> includes a <code>:has()</code> pseudo-class that works the same as the <a href=\"http://api.jquery.com/has-selector/\" rel=\"noreferrer\">jQuery implementation</a>. As of April 2017, <strong><a href=\"http://caniuse.com/#feat=css-has\" rel=\"noreferrer\">this is still not supported by any browser</a></strong>. </p>\n\n<p>Using <code>:has()</code> the original question could be solved with this:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>li:has(> a.active) { /* styles to apply to the li tag */ }\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 1014861 | |
| }, | |
| { | |
| "title": "How to disable resizable property of textarea?", | |
| "body": "<p>The following CSS rule disables resizing behavior for <a href=\"http://www.w3.org/wiki/HTML/Elements/textarea\" rel=\"noreferrer\"><code>textarea</code></a> elements:</p>\n\n<pre><code>textarea {\n resize: none;\n}\n</code></pre>\n\n<p>To disable it for some (but not all) <code>textarea</code>s, there are a <a href=\"http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/\" rel=\"noreferrer\">couple of options</a>.</p>\n\n<p>To disable a specific <code>textarea</code> with the <code>name</code> attribute set to <code>foo</code> (i.e., <code><textarea name=\"foo\"></textarea></code>):</p>\n\n<pre><code>textarea[name=foo] {\n resize: none;\n}\n</code></pre>\n\n<p>Or, using an <code>id</code> attribute (i.e., <code><textarea id=\"foo\"></textarea></code>):</p>\n\n<pre><code>#foo {\n resize: none;\n}\n</code></pre>\n\n<p>The <a href=\"http://www.w3.org/TR/css3-ui/#resize\" rel=\"noreferrer\">W3C page</a> lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:</p>\n\n<pre><code>textarea {\n resize: vertical; /* user can resize vertically, but width is fixed */\n}\n</code></pre>\n\n<p>Review a decent <a href=\"http://quirksmode.org/css/user-interface/\" rel=\"noreferrer\">compatibility page</a> to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be <a href=\"http://davidwalsh.name/textarea-resize\" rel=\"noreferrer\">further restrained</a> in CSS using max-width, max-height, min-width, and min-height.</p>\n\n<blockquote>\n <h3>Super important to know:</h3>\n \n <p>This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;</p>\n \n <p>Quote by Chris Coyier,\n <a href=\"http://css-tricks.com/almanac/properties/r/resize/\" rel=\"noreferrer\">http://css-tricks.com/almanac/properties/r/resize/</a></p>\n</blockquote>\n", | |
| "source": "so", | |
| "questionId": 5235142 | |
| }, | |
| { | |
| "title": "How do I give text or an image a transparent background using CSS?", | |
| "body": "<p>Either use a semi-transparent <a href=\"http://en.wikipedia.org/wiki/Portable_Network_Graphics\" rel=\"noreferrer\">PNG</a> image or use CSS3:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>background-color:rgba(255,0,0,0.5);\n</code></pre>\n\n<p>Here's an article from css3.info, <em><a href=\"http://www.css3.info/opacity_rgba_and_compromise/\" rel=\"noreferrer\">Opacity, RGBA and compromise</a></em> (2007-06-03).</p>\n", | |
| "source": "so", | |
| "questionId": 806000 | |
| }, | |
| { | |
| "title": "Need an unordered list without any bullets", | |
| "body": "<p>You can remove bullets by setting the <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type\" rel=\"noreferrer\"><code>list-style-type</code></a> to <code>none</code> on the CSS for parent element (typically a <code><ul></code>), for example:</p>\n\n<pre><code>ul {\n list-style-type: none;\n}\n</code></pre>\n\n<p>You might also want to add <code>padding: 0</code> and <code>margin: 0</code> to that, if you want to remove indentation as well.</p>\n\n<p>See <a href=\"http://css.maxdesign.com.au/listutorial/index.htm\" rel=\"noreferrer\">Listutorial</a> for a great walkthrough of list formatting techniques.</p>\n", | |
| "source": "so", | |
| "questionId": 1027354 | |
| }, | |
| { | |
| "title": "When to use margin vs padding in CSS", | |
| "body": "<p><strong>TL;DR:</strong> <em>By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.</em></p>\n\n<p>To me the biggest difference between padding and margin is that <strong>vertical</strong> margins auto-collapse, and padding doesn't. Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element, and is always preserved. So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element. Thus content of the two elements will end up being 2em apart.</p>\n\n<p>Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap. So in this example you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart. </p>\n\n<p>This can be really useful when you know that you want say 1em of spacing around an element, regardless of what element it is next to.</p>\n\n<p>The other two big differences is that padding is included in the click region and background color/image, but not the margin. </p>\n", | |
| "source": "so", | |
| "questionId": 2189452 | |
| }, | |
| { | |
| "title": "How do I vertically center text with CSS?", | |
| "body": "<p>You can try this basic approach:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>div {\r\n height: 90px;\r\n line-height: 90px;\r\n text-align: center;\r\n border: 2px dashed #f69c55;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div>\r\n Hello World!\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>It only works for a single line of text though, because we set the line's height to the same height as the containing box element.</p>\n\n<hr>\n\n<h2>A more versatile approach</h2>\n\n<p>This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>div {\r\n height: 200px;\r\n line-height: 200px;\r\n text-align: center;\r\n border: 2px dashed #f69c55;\r\n}\r\nspan {\r\n display: inline-block;\r\n vertical-align: middle;\r\n line-height: normal;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div>\r\n <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>The CSS just sizes the <code><div></code>, vertically center aligns the <code><span></code> by setting the <code><div></code>'s line-height equal to its height, and makes the <code><span></code> an inline-block with <code>vertical-align: middle</code>. Then it sets the line-height back to normal for the <code><span></code>, so its contents will flow naturally inside the block.</p>\n\n<hr>\n\n<h2>Simulating table display</h2>\n\n<p>And here is another option, which may not work on older <a href=\"http://caniuse.com/css-table\" rel=\"noreferrer\">browsers that don't support <code>display: table</code> and <code>display: table-cell</code></a> (basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>div {\r\n display: table;\r\n height: 100px;\r\n width: 100%;\r\n text-align: center;\r\n border: 2px dashed #f69c55;\r\n}\r\nspan {\r\n display: table-cell;\r\n vertical-align: middle;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div>\r\n <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<h2>Using absolute positioning</h2>\n\n<p>This technique uses an absolutely positioned element setting top, bottom, left and right to 0. It is described in more detail in an article in Smashing Magazine, <em><a href=\"http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/\" rel=\"noreferrer\">Absolute Horizontal And Vertical Centering In CSS</a></em>.</p>\n", | |
| "source": "so", | |
| "questionId": 8865458 | |
| }, | |
| { | |
| "title": "How to make div not larger than its contents?", | |
| "body": "<p>The solution is to set your <code>div</code> to <code>display: inline-block</code>.</p>\n", | |
| "source": "so", | |
| "questionId": 450903 | |
| }, | |
| { | |
| "title": "Vertically align text next to an image?", | |
| "body": "<p>Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><!-- moved \"vertical-align:middle\" style from span to img -->\r\n<div>\r\n <img style=\"vertical-align:middle\" src=\"https://placehold.it/60x60\">\r\n <span style=\"\">Works.</span>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Tested in FF3.</p>\n\n<p>Now you can use flexbox for this type of layout.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.box {\r\n display: flex;\r\n align-items:center;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div class=\"box\">\r\n <img src=\"https://placehold.it/60x60\">\r\n <span style=\"\">Works.</span>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 489340 | |
| }, | |
| { | |
| "title": "How to make a div 100% height of the browser window?", | |
| "body": "<p>There are a couple of CSS3 measurement units called:</p>\n\n<h1><a href=\"http://www.w3.org/TR/css3-values/#viewport-relative-lengths\" rel=\"noreferrer\">Viewport-Percentage <em>(or Viewport-Relative)</em> Lengths</a></h1>\n\n<h2>What are Viewport-Percentage Lengths?</h2>\n\n<p>From the linked W3 Candidate Recommendation above:</p>\n\n<blockquote>\n <p><em>The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.</em></p>\n</blockquote>\n\n<p>These units are <code>vh</code> (viewport height), <code>vw</code> (viewport width), <code>vmin</code> (viewport minimum length) and <code>vmax</code> (viewport maximum length).</p>\n\n<h2>How can this be used to make a divider fill the height of the browser?</h2>\n\n<p>For this question, we can make use of <code>vh</code>: <code>1vh</code> is equal to 1% of the viewport's height. That is to say, <code>100vh</code> is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:</p>\n\n<h3>HTML</h3>\n\n<pre class=\"lang-html prettyprint-override\"><code><div></div>\n</code></pre>\n\n<h3>CSS</h3>\n\n<pre class=\"lang-css prettyprint-override\"><code>div {\n height:100vh;\n}\n</code></pre>\n\n<p>This is literally all that's needed. Here is a <a href=\"http://jsfiddle.net/JamesD/hr8sL/\" rel=\"noreferrer\"><strong>JSFiddle example</strong></a> of this in use.</p>\n\n<h2>What browsers support these new units?</h2>\n\n<p>This is currently supported on all up-to-date major browsers apart from Opera Mini. Check out <a href=\"http://caniuse.com/#feat=viewport-units\" rel=\"noreferrer\">Can I use...</a> for further support.</p>\n\n<h2>How can this be used with multiple columns?</h2>\n\n<p>In the case of the question at hand, featuring a left and a right divider, here is a <a href=\"http://jsfiddle.net/JamesD/hr8sL/1/\" rel=\"noreferrer\">JSFiddle example</a> showing a two-column layout involving both <code>vh</code> and <code>vw</code>.</p>\n\n<h2>How is <code>100vh</code> different to <code>100%</code>?</h2>\n\n<p>Take this layout for example:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><body style=\"height:100%\">\n <div style=\"height:200px\">\n <p style=\"height:100%; display:block;\">Hello, world!</p>\n </div>\n</body>\n</code></pre>\n\n<p>The <code>p</code> tag here is set to 100% height, but because its containing <code>div</code> has 200px height, 100% of 200px becomes 200px, <em>not</em> 100% of the <code>body</code> height. Using <code>100vh</code> instead means that the <code>p</code> tag will be 100% height of the <code>body</code> regardless of the <code>div</code> height. Take a look at this <a href=\"http://jsfiddle.net/JamesD/hr8sL/2/\" rel=\"noreferrer\">accompanying JSFiddle</a> to easily see the difference!</p>\n", | |
| "source": "so", | |
| "questionId": 1575141 | |
| }, | |
| { | |
| "title": "How do CSS triangles work?", | |
| "body": "<h1>CSS Triangles: A Tragedy in Five Acts</h1>\n\n<p>As <a href=\"https://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work/7073503#7073503\">alex said</a>, borders of equal width butt up against each other at 45 degree angles:</p>\n\n<p><img src=\"https://i.stack.imgur.com/hZefy.png\" alt=\"borders meet at 45 degree angles, content in middle\"></p>\n\n<p>When you have no top border, it looks like this:</p>\n\n<p><img src=\"https://i.stack.imgur.com/uV9Q5.png\" alt=\"no top border\"></p>\n\n<p>Then you give it a width of 0...</p>\n\n<p><img src=\"https://i.stack.imgur.com/K1A7G.png\" alt=\"no width\"></p>\n\n<p>...and a height of 0...</p>\n\n<p><img src=\"https://i.stack.imgur.com/NsmsW.png\" alt=\"no height either\"></p>\n\n<p>...and finally, you make the two side borders transparent:</p>\n\n<p><img src=\"https://i.stack.imgur.com/B42zY.png\" alt=\"transparent side borders\"></p>\n\n<p>That results in a triangle.</p>\n", | |
| "source": "so", | |
| "questionId": 7073484 | |
| }, | |
| { | |
| "title": "How can I transition height: 0; to height: auto; using CSS?", | |
| "body": "<p>Use <code>max-height</code> in the transformation and not <code>height</code>. And set a value on <code>max-height</code> to something bigger than your box will ever get.</p>\n\n<p>See <a href=\"http://jsfiddle.net/3Fc7D/3054/\" rel=\"noreferrer\">JSFiddle demo</a> provided by Chris Jordan in another <a href=\"https://stackoverflow.com/a/20226830/18706\">answer</a> here.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#menu #list {\r\n max-height: 0;\r\n transition: max-height 0.15s ease-out;\r\n overflow: hidden;\r\n background: #d5d5d5;\r\n}\r\n\r\n#menu:hover #list {\r\n max-height: 500px;\r\n transition: max-height 0.25s ease-in;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div id=\"menu\">\r\n <a>hover me</a>\r\n <ul id=\"list\">\r\n <!-- Create a bunch, or not a bunch, of li's to see the timing. -->\r\n <li>item</li>\r\n <li>item</li>\r\n <li>item</li>\r\n <li>item</li>\r\n <li>item</li>\r\n </ul>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 3508605 | |
| }, | |
| { | |
| "title": "How to align checkboxes and their labels consistently cross-browsers", | |
| "body": "<p>After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:</p>\n\n<ol>\n<li>Inputs must be on their own line.</li>\n<li>Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.</li>\n<li>If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).</li>\n</ol>\n\n<p>Before I get into any explanation, I'll just give you the code:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>label {\r\n display: block;\r\n padding-left: 15px;\r\n text-indent: -15px;\r\n}\r\ninput {\r\n width: 13px;\r\n height: 13px;\r\n padding: 0;\r\n margin:0;\r\n vertical-align: bottom;\r\n position: relative;\r\n top: -1px;\r\n *overflow: hidden;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><form>\r\n <div>\r\n <label><input type=\"checkbox\" /> Label text</label>\r\n </div>\r\n</form></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Here is the working example in <a href=\"http://jsfiddle.net/t8EGn/6/\" rel=\"noreferrer\">JSFiddle</a>.</p>\n\n<p>This code assumes that you're using a reset like Eric Meyer's that doesn't override form input margins and padding (hence putting margin and padding resets in the input CSS). Obviously in a live environment you'll probably be nesting/overriding stuff to support other input elements, but I wanted to keep things simple.</p>\n\n<p>Things to note:</p>\n\n<ul>\n<li>The <code>*overflow</code> declaration is an inline IE hack (the star-property hack). Both IE 6 and 7 will notice it, but Safari and Firefox will properly ignore it. I think it might be valid CSS, but you're still better off with conditional comments; just used it for simplicity.</li>\n<li>As best I can tell, the only <code>vertical-align</code> statement that was consistent across browsers was <code>vertical-align: bottom</code>. Setting this and then relatively positioning upwards behaved almost identically in Safari, Firefox and IE with only a pixel or two of discrepancy.</li>\n<li>The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements. It isn't padding or margin, and it's damned persistent. Setting a width and height on the checkbox and then <code>overflow: hidden</code> for some reason cuts off the extra space and allows IE's positioning to act very similarly to Safari and Firefox.</li>\n<li>Depending on your text sizing, you'll no doubt need to adjust the relative positioning, width, height, and so forth to get things looking right.</li>\n</ul>\n\n<p>Hope this helps someone else! I haven't tried this specific technique on any projects other than the one I was working on this morning, so definitely pipe up if you find something that works more consistently. </p>\n", | |
| "source": "so", | |
| "questionId": 306252 | |
| }, | |
| { | |
| "title": "How can I make the cursor a hand when a user hovers over a list item?", | |
| "body": "<p>In light of the passage of time, as people have mentioned, you can now safely just use:</p>\n\n<pre><code>li { cursor: pointer; }\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 3087975 | |
| }, | |
| { | |
| "title": "Convert HTML + CSS to PDF with PHP?", | |
| "body": "<p><strong>Important:</strong> Please note that this answer was written in 2009 and it might not be the most cost-effective solution today in 2018. Browsers and other open source renderers have become <em>a lot</em> better at this than they were back then. </p>\n\n<hr>\n\n<p>Have a look at <a href=\"http://princexml.com\" rel=\"noreferrer\">PrinceXML</a>.</p>\n\n<p>It's definitely the best HTML/CSS to PDF converter out there, although it's not free (But hey, your programming might not be free either, so if it saves you 10 hours of work, you're home free (since you also need to take into account that the alternative solutions will require you to setup a dedicated server with the right software)</p>\n\n<p>Oh yeah, did I mention that this is the first (and probably only) HTML2PDF solution that does full <a href=\"http://princexml.com/samples/acid2/acid2.pdf\" rel=\"noreferrer\">ACID2</a> ?</p>\n\n<p><a href=\"http://princexml.com/samples/\" rel=\"noreferrer\">PrinceXML Samples</a></p>\n", | |
| "source": "so", | |
| "questionId": 391005 | |
| }, | |
| { | |
| "title": "Make a div fill the height of the remaining screen space", | |
| "body": "<h3>2015 update: the flexbox approach</h3>\n\n<p>There are two other answers briefly mentioning <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes\">flexbox</a>; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.</p>\n\n<blockquote>\n <p>Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.</p>\n \n <p>(taken from <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes\">https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes</a>)</p>\n</blockquote>\n\n<p>All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.</p>\n\n<p>To check current support you can also see here:\n<a href=\"http://caniuse.com/#feat=flexbox\">http://caniuse.com/#feat=flexbox</a></p>\n\n<h3>Working example</h3>\n\n<p>With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>html,\r\nbody {\r\n height: 100%;\r\n margin: 0\r\n}\r\n\r\n.box {\r\n display: flex;\r\n flex-flow: column;\r\n height: 100%;\r\n}\r\n\r\n.box .row {\r\n border: 1px dotted grey;\r\n}\r\n\r\n.box .row.header {\r\n flex: 0 1 auto;\r\n /* The above is shorthand for:\r\n flex-grow: 0,\r\n flex-shrink: 1,\r\n flex-basis: auto\r\n */\r\n}\r\n\r\n.box .row.content {\r\n flex: 1 1 auto;\r\n}\r\n\r\n.box .row.footer {\r\n flex: 0 1 40px;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->\r\n\r\n<div class=\"box\">\r\n <div class=\"row header\">\r\n <p><b>header</b>\r\n <br />\r\n <br />(sized to content)</p>\r\n </div>\r\n <div class=\"row content\">\r\n <p>\r\n <b>content</b>\r\n (fills remaining space)\r\n </p>\r\n </div>\r\n <div class=\"row footer\">\r\n <p><b>footer</b> (fixed height)</p>\r\n </div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>In the CSS above, the <a href=\"https://developer.mozilla.org/en/CSS/flex\">flex</a> property shorthands the <a href=\"https://developer.mozilla.org/en/CSS/flex-grow\">flex-grow</a>, <a href=\"https://developer.mozilla.org/en/CSS/flex-shrink\">flex-shrink</a>, and <a href=\"https://developer.mozilla.org/en/CSS/flex-basis\">flex-basis</a> properties to establish the flexibility of the flex items. Mozilla has a <a href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes\">good introduction to the flexible boxes model</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 90178 | |
| }, | |
| { | |
| "title": "What's the difference between SCSS and Sass?", | |
| "body": "<p>Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do <strong>not</strong> extend the CSS standard itself.</p>\n\n<p>The main reason for this is the addition of features that CSS painfully lacks (like variables). </p>\n\n<p>The difference between SCSS and Sass, this text on the <a href=\"http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax\" rel=\"noreferrer\">Sass documentation page</a> should answer the question:</p>\n\n<blockquote>\n <p>There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the <strong>.scss</strong> extension.</p>\n \n <p>The second and <strong>older syntax</strong>, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the <strong>.sass</strong> extension.</p>\n</blockquote>\n\n<p>However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.</p>\n", | |
| "source": "so", | |
| "questionId": 5654447 | |
| }, | |
| { | |
| "title": "Click through a DIV to underlying elements", | |
| "body": "<p>Yes, you <strong>CAN</strong> do this. </p>\n\n<p>Using <code>pointer-events: none</code> along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.</p>\n\n<p>Using <code>AlphaImageLoader</code>, you can even put transparent <code>.PNG/.GIF</code>s in the overlay <code>div</code> and have clicks flow through to elements underneath.</p>\n\n<p>CSS:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>pointer-events: none;\nbackground: url('your_transparent.png');\n</code></pre>\n\n<p>IE11 conditional:</p>\n\n<pre><code>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');\nbackground: none !important;\n</code></pre>\n\n<p>Here is a <a href=\"http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html\" rel=\"noreferrer\">basic example page</a> with all the code.</p>\n", | |
| "source": "so", | |
| "questionId": 3680429 | |
| }, | |
| { | |
| "title": "What is the best way to conditionally apply a class?", | |
| "body": "<p>If you don't want to put CSS class names into Controller like I do, here is an old trick that I use since pre-v1 days. We can write an expression that evaluates directly to a class name <em>selected</em>, no custom directives are necessary:</p>\n\n<pre><code>ng:class=\"{true:'selected', false:''}[$index==selectedIndex]\"\n</code></pre>\n\n<p><em>Please note the old syntax with colon.</em> </p>\n\n<p>There is also a new better way of applying classes conditionally, like:</p>\n\n<pre><code>ng-class=\"{selected: $index==selectedIndex}\"\n</code></pre>\n\n<p>Angular now supports expressions that return an object. Each property (name) of this object is now considered as a class name and is applied depending on its value.</p>\n\n<p>However these ways are not functionally equal. Here is an example:</p>\n\n<pre><code>ng-class=\"{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]\"\n</code></pre>\n\n<p>We could therefore reuse existing CSS classes by basically mapping a model property to a class name and at the same time keep CSS classes out of Controller code.</p>\n", | |
| "source": "so", | |
| "questionId": 7792652 | |
| }, | |
| { | |
| "title": "How to vertically align an image inside a div?", | |
| "body": "<p>The only (and the best cross-browser) way as I know is to use an <code>inline-block</code> helper with <code>height: 100%</code> and <code>vertical-align: middle</code> on both elements.</p>\n\n<p>So there is a solution: <a href=\"http://jsfiddle.net/kizu/4RPFa/4570/\" rel=\"noreferrer\">http://jsfiddle.net/kizu/4RPFa/4570/</a></p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"true\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code snippet-currently-hidden\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.frame {\r\n height: 25px; /* equals max image height */\r\n width: 160px;\r\n border: 1px solid red;\r\n white-space: nowrap; /* this is required unless you put the helper span closely near the img */\r\n \r\n text-align: center; margin: 1em 0;\r\n}\r\n\r\n.helper {\r\n display: inline-block;\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\nimg {\r\n background: #3A6F9A;\r\n vertical-align: middle;\r\n max-height: 25px;\r\n max-width: 160px;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div class=frame>\r\n <span class=\"helper\"></span><img src=\"http://jsfiddle.net/img/logo.png\" height=250 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span><img src=\"http://jsfiddle.net/img/logo.png\" height=25 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span><img src=\"http://jsfiddle.net/img/logo.png\" height=23 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span><img src=\"http://jsfiddle.net/img/logo.png\" height=21 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span><img src=\"http://jsfiddle.net/img/logo.png\" height=19 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span>\r\n <img src=\"http://jsfiddle.net/img/logo.png\" height=17 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span>\r\n <img src=\"http://jsfiddle.net/img/logo.png\" height=15 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span>\r\n <img src=\"http://jsfiddle.net/img/logo.png\" height=13 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span>\r\n <img src=\"http://jsfiddle.net/img/logo.png\" height=11 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span>\r\n <img src=\"http://jsfiddle.net/img/logo.png\" height=9 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span>\r\n <img src=\"http://jsfiddle.net/img/logo.png\" height=7 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span>\r\n <img src=\"http://jsfiddle.net/img/logo.png\" height=5 />\r\n</div>\r\n<div class=frame>\r\n <span class=\"helper\"></span>\r\n <img src=\"http://jsfiddle.net/img/logo.png\" height=3 />\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Or, if you don't want to have an extra element in modern browsers and don't mind using IE expressions, you can use a pseudo-element and add it to IE using a convenient Expression, that runs only once per element, so there won't be any performance issues:</p>\n\n<p>The solution with <code>:before</code> and <code>expression()</code> for IE: <a href=\"http://jsfiddle.net/kizu/4RPFa/4571/\" rel=\"noreferrer\">http://jsfiddle.net/kizu/4RPFa/4571/</a></p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"true\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code snippet-currently-hidden\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.frame {\r\n height: 25px; /* equals max image height */\r\n width: 160px;\r\n border: 1px solid red;\r\n white-space: nowrap;\r\n \r\n text-align: center; margin: 1em 0;\r\n}\r\n\r\n.frame:before,\r\n.frame_before {\r\n content: \"\";\r\n display: inline-block;\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\nimg {\r\n background: #3A6F9A;\r\n vertical-align: middle;\r\n max-height: 25px;\r\n max-width: 160px;\r\n}\r\n\r\n/* Move this to conditional comments */\r\n.frame {\r\n list-style:none;\r\n behavior: expression(\r\n function(t){\r\n t.insertAdjacentHTML('afterBegin','<span class=\"frame_before\"></span>');\r\n t.runtimeStyle.behavior = 'none';\r\n }(this)\r\n );\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=250 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=25 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=23 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=21 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=19 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=17 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=15 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=13 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=11 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=9 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=7 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=5 /></div>\r\n<div class=frame><img src=\"http://jsfiddle.net/img/logo.png\" height=3 /></div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<p>How it works:</p>\n\n<ol>\n<li><p>When you have two <code>inline-block</code> elements near each other, you can align each to other's side, so with <code>vertical-align: middle</code> you'll get something like this:</p>\n\n<p><img src=\"https://i.stack.imgur.com/XIFPv.png\" alt=\"Two aligned blocks\"></p></li>\n<li><p>When you have a block with fixed height (in <code>px</code>, <code>em</code> or other absolute unit), you can set the height of inner blocks in <code>%</code>.</p></li>\n<li>So, adding one <code>inline-block</code> with <code>height: 100%</code> in a block with fixed height would align another <code>inline-block</code> element in it (<code><img/></code> in your case) vertically near it.</li>\n</ol>\n", | |
| "source": "so", | |
| "questionId": 7273338 | |
| }, | |
| { | |
| "title": "How do I make a placeholder for a 'select' box?", | |
| "body": "<p>How about a non CSS - no javascript/jQuery answer?</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><select>\r\n <option value=\"\" disabled selected>Select your option</option>\r\n <option value=\"hurr\">Durr</option>\r\n</select></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 5805059 | |
| }, | |
| { | |
| "title": "How to vertically center a div for all browsers?", | |
| "body": "<p>Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, <strong>flexible height</strong> content box. It was tested and working for recent versions of Firefox, Opera, Chrome, and Safari.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.outer {\r\n display: table;\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n\r\n.middle {\r\n display: table-cell;\r\n vertical-align: middle;\r\n}\r\n\r\n.inner {\r\n margin-left: auto;\r\n margin-right: auto;\r\n width: 400px;\r\n /*whatever width you want*/\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div class=\"outer\">\r\n <div class=\"middle\">\r\n <div class=\"inner\">\r\n <h1>The Content</h1>\r\n <p>Once upon a midnight dreary...</p>\r\n </div>\r\n </div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><a href=\"http://emergentweb.com/test/valign.html\" rel=\"noreferrer\">View A Working Example With Dynamic Content</a></p>\n\n<p>I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.</p>\n", | |
| "source": "so", | |
| "questionId": 396145 | |
| }, | |
| { | |
| "title": "How do I combine a background-image and CSS3 gradient on the same element?", | |
| "body": "<p>Multiple backgrounds!</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>body {\r\n background: #eb01a5;\r\n background-image: url(\"IMAGE_URL\"); /* fallback */\r\n background-image: url(\"IMAGE_URL\"), linear-gradient(#eb01a5, #d13531); /* W3C */\r\n}</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>These 2 lines are the fallback for any browser that doesn't do gradients.\n See notes for stacking images only IE < 9 below.</p>\n\n<ul>\n<li>Line 1 sets a flat background color.</li>\n<li>Line 2 sets the background image fallback.</li>\n</ul>\n\n<p>The final line sets a background image and gradient for browsers that can handle them.</p>\n\n<ul>\n<li>Line 3 is for all relatively modern browsers.</li>\n</ul>\n\n<p>Nearly all current browsers have support for multiple background images and css backgrounds. See <a href=\"http://caniuse.com/#feat=css-gradients\" rel=\"noreferrer\">http://caniuse.com/#feat=css-gradients</a> for browser support. For a good post on why you don't need multiple browser prefixes, see <a href=\"http://codepen.io/thebabydino/full/pjxVWp/\" rel=\"noreferrer\">http://codepen.io/thebabydino/full/pjxVWp/</a></p>\n\n<p><strong>Layer Stack</strong></p>\n\n<p>It should be noted that the first defined image will be topmost in the stack. In this case, the image is on TOP of the gradient.</p>\n\n<p>For more information about background layering see <a href=\"http://www.w3.org/TR/css3-background/#layering\" rel=\"noreferrer\">http://www.w3.org/TR/css3-background/#layering</a>.</p>\n\n<p><strong>Stacking images ONLY (no gradients in the declaration) For IE < 9</strong></p>\n\n<p>IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful <a href=\"http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/\" rel=\"noreferrer\">Conditional HTML element</a> along with your fallback code:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.lte9 #target{ background-image: url(\"IMAGE_URL\"); }\n</code></pre>\n\n<p><strong>Background position, sizing etc.</strong></p>\n\n<p>Other properties that would apply to a single image may also be comma separated. If only 1 value is supplied, that will be applied to all stacked images including the gradient. <code>background-size: 40px;</code> will constrain both the image and the gradient to 40px height and width. However using <code>background-size: 40px, cover;</code> will make the image 40px and the gradient will cover the element. To only apply a setting to one image, set the default for the other: <code>background-position: 50%, 0 0;</code> or for <a href=\"http://caniuse.com/#feat=css-initial-value\" rel=\"noreferrer\">browsers that support it</a> use <code>initial</code>: <code>background-position: 50%, initial;</code></p>\n\n<p>You may also use the background shorthand, however this removes the fallback color and image.</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>body{\n background: url(\"IMAGE_URL\") no-repeat left top, linear-gradient(#eb01a5, #d13531);\n}\n</code></pre>\n\n<p>The same applies to background-position, background-repeat, etc. </p>\n", | |
| "source": "so", | |
| "questionId": 2504071 | |
| }, | |
| { | |
| "title": "Which characters are valid in CSS class names/selectors?", | |
| "body": "<p>You can check directly at the <a href=\"http://www.w3.org/TR/CSS21/grammar.html#scanner\" rel=\"noreferrer\">CSS grammar</a>.</p>\n\n<p><em>Basically</em><sup>1</sup>, a name must begin with an underscore (<code>_</code>), a hyphen (<code>-</code>), or a letter(<code>a</code>–<code>z</code>), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must<sup>2</sup> be a letter or underscore, and the name must be at least 2 characters long.</p>\n\n<pre><code>-?[_a-zA-Z]+[_a-zA-Z0-9-]*\n</code></pre>\n\n<p>Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in <code>-moz-opacity</code>.</p>\n\n<p><sup>1</sup> It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).</p>\n\n<p><sup>2</sup> Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. <code>--indent1</code>, is invalid. However, I'm pretty sure I've seen this in practice.</p>\n", | |
| "source": "so", | |
| "questionId": 448981 | |
| }, | |
| { | |
| "title": "How do I auto-resize an image to fit a div container", | |
| "body": "<p>Do not apply an explicit width or height to the image tag. Instead, give it:</p>\n\n<pre><code>max-width:100%;\nmax-height:100%;\n</code></pre>\n\n<p>Example: <a href=\"http://jsfiddle.net/xwrvxser/1/\" rel=\"noreferrer\">http://jsfiddle.net/xwrvxser/1/</a></p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n}\r\n\r\n.portrait {\r\n height: 80px;\r\n width: 30px;\r\n}\r\n\r\n.landscape {\r\n height: 30px;\r\n width: 80px;\r\n}\r\n\r\n.square {\r\n height: 75px;\r\n width: 75px;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>Portrait Div\r\n<div class=\"portrait\">\r\n <img src=\"http://i.stack.imgur.com/xkF9Q.jpg\">\r\n</div>\r\n\r\nLandscape Div\r\n<div class=\"landscape\">\r\n <img src=\"http://i.stack.imgur.com/xkF9Q.jpg\">\r\n</div>\r\n\r\nSquare Div\r\n<div class=\"square\">\r\n <img src=\"http://i.stack.imgur.com/xkF9Q.jpg\">\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 3029422 | |
| }, | |
| { | |
| "title": "How to make Twitter Bootstrap menu dropdown on hover rather than click", | |
| "body": "<p>I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>body {\r\n padding-top: 60px;\r\n padding-bottom: 40px;\r\n}\r\n\r\n.sidebar-nav {\r\n padding: 9px 0;\r\n}\r\n\r\n.dropdown-menu .sub-menu {\r\n left: 100%;\r\n position: absolute;\r\n top: 0;\r\n visibility: hidden;\r\n margin-top: -1px;\r\n}\r\n\r\n.dropdown-menu li:hover .sub-menu {\r\n visibility: visible;\r\n}\r\n\r\n.dropdown:hover .dropdown-menu {\r\n display: block;\r\n}\r\n\r\n.nav-tabs .dropdown-menu,\r\n.nav-pills .dropdown-menu,\r\n.navbar .dropdown-menu {\r\n margin-top: 0;\r\n}\r\n\r\n.navbar .sub-menu:before {\r\n border-bottom: 7px solid transparent;\r\n border-left: none;\r\n border-right: 7px solid rgba(0, 0, 0, 0.2);\r\n border-top: 7px solid transparent;\r\n left: -7px;\r\n top: 10px;\r\n}\r\n\r\n.navbar .sub-menu:after {\r\n border-top: 6px solid transparent;\r\n border-left: none;\r\n border-right: 6px solid #fff;\r\n border-bottom: 6px solid transparent;\r\n left: 10px;\r\n top: 11px;\r\n left: -6px;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><link href=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n\r\n<div class=\"navbar navbar-fixed-top\">\r\n <div class=\"navbar-inner\">\r\n <div class=\"container-fluid\">\r\n <a data-target=\".nav-collapse\" data-toggle=\"collapse\" class=\"btn btn-navbar\">\r\n <span class=\"icon-bar\"></span>\r\n <span class=\"icon-bar\"></span>\r\n <span class=\"icon-bar\"></span>\r\n </a>\r\n <a href=\"#\" class=\"brand\">Project name</a>\r\n <div class=\"nav-collapse\">\r\n <ul class=\"nav\">\r\n <li class=\"active\"><a href=\"#\">Home</a></li>\r\n <li><a href=\"#\">Link</a></li>\r\n <li><a href=\"#\">Link</a></li>\r\n <li><a href=\"#\">Link</a></li>\r\n <li class=\"dropdown\">\r\n <a data-toggle=\"dropdown\" class=\"dropdown-toggle\" href=\"#\">Dropdown <b class=\"caret\"></b></a>\r\n <ul class=\"dropdown-menu\">\r\n <li>\r\n <a href=\"#\">2-level Dropdown <i class=\"icon-arrow-right\"></i></a>\r\n <ul class=\"dropdown-menu sub-menu\">\r\n <li><a href=\"#\">Action</a></li>\r\n <li><a href=\"#\">Another action</a></li>\r\n <li><a href=\"#\">Something else here</a></li>\r\n <li class=\"divider\"></li>\r\n <li class=\"nav-header\">Nav header</li>\r\n <li><a href=\"#\">Separated link</a></li>\r\n <li><a href=\"#\">One more separated link</a></li>\r\n </ul>\r\n </li>\r\n <li><a href=\"#\">Another action</a></li>\r\n <li><a href=\"#\">Something else here</a></li>\r\n <li class=\"divider\"></li>\r\n <li class=\"nav-header\">Nav header</li>\r\n <li><a href=\"#\">Separated link</a></li>\r\n <li><a href=\"#\">One more separated link</a></li>\r\n </ul>\r\n </li>\r\n </ul>\r\n <form action=\"\" class=\"navbar-search pull-left\">\r\n <input type=\"text\" placeholder=\"Search\" class=\"search-query span2\">\r\n </form>\r\n <ul class=\"nav pull-right\">\r\n <li><a href=\"#\">Link</a></li>\r\n <li class=\"divider-vertical\"></li>\r\n <li class=\"dropdown\">\r\n <a class=\"#\" href=\"#\">Menu</a>\r\n </li>\r\n </ul>\r\n </div>\r\n <!-- /.nav-collapse -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<hr>\r\n\r\n<ul class=\"nav nav-pills\">\r\n <li class=\"active\"><a href=\"#\">Regular link</a></li>\r\n <li class=\"dropdown\">\r\n <a href=\"#\" data-toggle=\"dropdown\" class=\"dropdown-toggle\">Dropdown <b class=\"caret\"></b></a>\r\n <ul class=\"dropdown-menu\" id=\"menu1\">\r\n <li>\r\n <a href=\"#\">2-level Menu <i class=\"icon-arrow-right\"></i></a>\r\n <ul class=\"dropdown-menu sub-menu\">\r\n <li><a href=\"#\">Action</a></li>\r\n <li><a href=\"#\">Another action</a></li>\r\n <li><a href=\"#\">Something else here</a></li>\r\n <li class=\"divider\"></li>\r\n <li class=\"nav-header\">Nav header</li>\r\n <li><a href=\"#\">Separated link</a></li>\r\n <li><a href=\"#\">One more separated link</a></li>\r\n </ul>\r\n </li>\r\n <li><a href=\"#\">Another action</a></li>\r\n <li><a href=\"#\">Something else here</a></li>\r\n <li class=\"divider\"></li>\r\n <li><a href=\"#\">Separated link</a></li>\r\n </ul>\r\n </li>\r\n <li class=\"dropdown\">\r\n <a href=\"#\">Menu</a>\r\n </li>\r\n <li class=\"dropdown\">\r\n <a href=\"#\">Menu</a>\r\n </li>\r\n</ul></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><a href=\"http://jsfiddle.net/2Smgv/3100/\" rel=\"noreferrer\">Demo</a></p>\n", | |
| "source": "so", | |
| "questionId": 8878033 | |
| }, | |
| { | |
| "title": "Transitions on the display: property", | |
| "body": "<p>You can concatenate two transitions or more, and <code>visibility</code> is what comes handy this time.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>div {\r\n border: 1px solid #eee;\r\n}\r\ndiv > ul {\r\n visibility: hidden;\r\n opacity: 0;\r\n transition: visibility 0s, opacity 0.5s linear;\r\n}\r\ndiv:hover > ul {\r\n visibility: visible;\r\n opacity: 1;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div>\r\n <ul>\r\n <li>Item 1</li>\r\n <li>Item 2</li>\r\n <li>Item 3</li>\r\n </ul>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>(Don't forget the vendor prefixes to the <code>transition</code> property)</p>\n\n<p>More details are in <a href=\"http://www.greywyvern.com/?post=337\" rel=\"noreferrer\">this article</a></p>\n", | |
| "source": "so", | |
| "questionId": 3331353 | |
| }, | |
| { | |
| "title": "How to style a <select> dropdown with CSS only without JavaScript?", | |
| "body": "<p>Here are 3 solutions:</p>\n\n<h2>Solution #1 - appearance: none - with ie10-11 workaround (<a href=\"http://codepen.io/danield770/pen/bgJOyV?editors=1100\" rel=\"noreferrer\">Demo</a>)</h2>\n\n<p>To hide the default arrow set <code>appearance: none</code> on the select element, then add your own custom arrow with <code>background-image</code></p>\n\n<pre><code>select {\n -webkit-appearance: none; \n -moz-appearance: none;\n appearance: none; /* remove default arrow */\n background-image: url(...); /* add custom arrow */\n}\n</code></pre>\n\n<p><strong>Browser Support:</strong></p>\n\n<p><code>appearance: none</code> has very good browser support (<a href=\"http://caniuse.com/#feat=css-appearance\" rel=\"noreferrer\">caniuse</a>) - except for ie11- and firefox 34-</p>\n\n<p>We can improve this technique and add support for ie10 and ie11 by adding</p>\n\n<pre><code>select::-ms-expand { \n display: none; /* hide the default arrow in ie10 and ie11 */\n}\n</code></pre>\n\n<p>If ie9 is a concern - we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky ie9 selector \nto at least undo our custom arrow - leaving the default select arrow intact.</p>\n\n<pre><code>/* target Internet Explorer 9 to undo the custom arrow */\n@media screen and (min-width:0\\0) {\n select {\n background-image:none\\9;\n padding: 5px\\9;\n } \n}\n</code></pre>\n\n<h2>All together:</h2>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"true\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code snippet-currently-hidden\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>select {\r\n margin: 50px;\r\n width: 150px;\r\n padding: 5px 35px 5px 5px;\r\n font-size: 16px;\r\n border: 1px solid #ccc;\r\n height: 34px;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;\r\n}\r\n\r\n\r\n/* CAUTION: IE hackery ahead */\r\n\r\n\r\nselect::-ms-expand { \r\n display: none; /* remove default arrow in IE 10 and 11 */\r\n}\r\n\r\n/* target Internet Explorer 9 to undo the custom arrow */\r\n@media screen and (min-width:0\\0) {\r\n select {\r\n background:none\\9;\r\n padding: 5px\\9;\r\n }\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><select>\r\n <option>Apples</option>\r\n <option selected>Pineapples</option>\r\n <option>Chocklate</option>\r\n <option>Pancakes</option>\r\n</select></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>This solution is easy and has good browser support - it should generally suffice.</p>\n\n<hr>\n\n<p>If browser support for ie9- and firefox 34- is necessary then keep reading... </p>\n\n<h2>Solution #2 Truncate the select element to hide the default arrow (<a href=\"http://jsfiddle.net/danield770/YvCHW/4246/\" rel=\"noreferrer\">Demo</a>)</h2>\n\n<p><a href=\"http://bavotasan.com/2011/style-select-box-using-only-css/\" rel=\"noreferrer\">(Read more here)</a></p>\n\n<p>Wrap the <code>select</code> element in a div with a <em>fixed width</em> and <code>overflow:hidden</code>.</p>\n\n<p>Then give the <code>select</code> element a width of about <em>20 pixels greater than the div</em>.</p>\n\n<p>The result is that the default drop-down arrow of the <code>select</code> element will be hidden (due to the <code>overflow:hidden</code> on the container), and you can place any background image you want on the right-hand-side of the div.</p>\n\n<p>The <strong>advantage</strong> of this approach is that it is cross-browser (Internet Explorer 8 and later, <a href=\"http://en.wikipedia.org/wiki/WebKit\" rel=\"noreferrer\">WebKit</a>, and <a href=\"http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29\" rel=\"noreferrer\">Gecko</a>). However, the <strong>disadvantage</strong> of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select element).</p>\n\n<p><img src=\"https://i.stack.imgur.com/Wyf6w.png\" alt=\"enter image description here\"></p>\n\n<p>[It should be noted, however, that if the custom select element is necessary only for <strong>MOBILE</strong> devices - then the above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this may be the best solution.]</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"true\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code snippet-currently-hidden\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.styled select {\r\n background: transparent;\r\n width: 150px;\r\n font-size: 16px;\r\n border: 1px solid #ccc;\r\n height: 34px;\r\n}\r\n.styled {\r\n margin: 50px;\r\n width: 120px;\r\n height: 34px;\r\n border: 1px solid #111;\r\n border-radius: 3px;\r\n overflow: hidden;\r\n background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div class=\"styled\">\r\n <select>\r\n <option>Pineapples</option>\r\n <option selected>Apples</option>\r\n <option>Chocklate</option>\r\n <option>Pancakes</option>\r\n </select>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<p>If the custom arrow is necessary on Firefox - prior to <a href=\"https://developer.mozilla.org/en-US/Firefox/Releases/35\" rel=\"noreferrer\">Version 35</a> - but you don't need to support old versions of IE - then keep reading...</p>\n\n<h2>Solution #3 - Use the <code>pointer-events</code> property (<a href=\"http://jsfiddle.net/danield770/sNwrs/2101/\" rel=\"noreferrer\">Demo</a>)</h2>\n\n<p><a href=\"http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/\" rel=\"noreferrer\">(Read more here)</a></p>\n\n<p>The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.</p>\n\n<p><strong>Advantage:</strong> Works well in WebKit and Gecko. It looks good too (no jutting out <code>option</code> elements)</p>\n\n<p><strong>Disadvantage:</strong> Internet Explorer (IE10 and down) doesn't support <code>pointer-events</code>, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!</p>\n\n<p>However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.</p>\n\n<p><strong>NB:</strong> Being that Internet Explorer 10 doesn't support <code>conditional comments</code> anymore: If you want to use this approach, you should probably use <strong>Modernizr</strong>. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described <a href=\"https://stackoverflow.com/a/14916454/703717\">here</a>.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"true\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code snippet-currently-hidden\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.notIE {\r\n position: relative;\r\n display: inline-block;\r\n}\r\nselect {\r\n display: inline-block;\r\n height: 30px;\r\n width: 150px;\r\n outline: none;\r\n color: #74646e;\r\n border: 1px solid #C8BFC4;\r\n border-radius: 4px;\r\n box-shadow: inset 1px 1px 2px #ddd8dc;\r\n background: #fff;\r\n}\r\n/* Select arrow styling */\r\n\r\n.notIE .fancyArrow {\r\n width: 23px;\r\n height: 28px;\r\n position: absolute;\r\n display: inline-block;\r\n top: 1px;\r\n right: 3px;\r\n background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;\r\n pointer-events: none;\r\n}\r\n/*target Internet Explorer 9 and Internet Explorer 10:*/\r\n\r\n@media screen and (min-width: 0\\0) {\r\n .notIE .fancyArrow {\r\n display: none;\r\n }\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><!--[if !IE]> -->\r\n<div class=\"notIE\">\r\n <!-- <![endif]-->\r\n <span class=\"fancyArrow\"></span>\r\n <select>\r\n <option>Apples</option>\r\n <option selected>Pineapples</option>\r\n <option>Chocklate</option>\r\n <option>Pancakes</option>\r\n </select>\r\n <!--[if !IE]> -->\r\n</div>\r\n<!-- <![endif]--></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 1895476 | |
| }, | |
| { | |
| "title": "Is there a "previous sibling" CSS selector?", | |
| "body": "<p>No, there is no \"previous sibling\" selector.</p>\n\n<p>On a related note, <code>~</code> is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. <code>+</code> is for next sibling and is CSS2.1.</p>\n\n<p>See <a href=\"http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators\" rel=\"noreferrer\">Adjacent sibling combinator</a> from <a href=\"http://www.w3.org/TR/css3-selectors/\" rel=\"noreferrer\">Selectors Level 3</a> and <a href=\"http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors\" rel=\"noreferrer\">5.7 Adjacent sibling selectors</a> from <a href=\"http://www.w3.org/TR/CSS21/cover.html#minitoc\" rel=\"noreferrer\">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 1817792 | |
| }, | |
| { | |
| "title": "Retrieve the position (X,Y) of an HTML element", | |
| "body": "<p>The correct approach is to use <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect\" rel=\"noreferrer\"><code>element.getBoundingClientRect()</code></a>:</p>\n\n<pre><code>var rect = element.getBoundingClientRect();\nconsole.log(rect.top, rect.right, rect.bottom, rect.left);\n</code></pre>\n\n<p>Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in <a href=\"http://www.w3.org/TR/cssom-view/#the-getclientrects-and-getboundingclientrect-methods\" rel=\"noreferrer\">CSSOM Views</a>. All other browsers adopted it <a href=\"http://www.quirksmode.org/dom/w3c_cssom.html#t21\" rel=\"noreferrer\">a long time ago</a>.</p>\n\n<p>Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.</p>\n\n<p>The values returned by <code>element.getBoundingClientRect()</code> are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:</p>\n\n<pre><code>var bodyRect = document.body.getBoundingClientRect(),\n elemRect = element.getBoundingClientRect(),\n offset = elemRect.top - bodyRect.top;\n\nalert('Element is ' + offset + ' vertical pixels from <body>');\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 442404 | |
| }, | |
| { | |
| "title": "How to remove border (outline) around text/input boxes? (Chrome)", | |
| "body": "<p>This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it, though:</p>\n\n<pre><code>textarea:focus, input:focus{\n outline: none;\n}\n</code></pre>\n\n<p>You may want to add some other way for users to know what element has keyboard focus though for usability.</p>\n\n<p>Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:</p>\n\n<pre><code>*:focus {\n outline: none;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 3397113 | |
| }, | |
| { | |
| "title": "Center a column using Twitter Bootstrap 3", | |
| "body": "<p>There are two approaches to centering a column <code><div></code> in Bootstrap 3:</p>\n\n<h2><strong>Approach 1 (offsets):</strong></h2>\n\n<p>The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to <strong>set an offset equal to half of the remaining size of the row</strong>. So for example, a column of size 2 would be centered by adding an offset of 5, that's <code>(12-2)/2</code>.</p>\n\n<p>In markup this would look like:</p>\n\n<pre><code><div class=\"row\">\n <div class=\"col-md-2 col-md-offset-5\"></div>\n</div>\n</code></pre>\n\n<p>Now, there's an obvious drawback for this method, <strong>it only works for even column sizes</strong>, so only <code>.col-X-2</code>, <code>.col-X-4</code>, <code>col-X-6</code>, <code>col-X-8</code> and <code>col-X-10</code> are supported.</p>\n\n<hr>\n\n<h2><strong>Approach 2 (the old margin:auto)</strong></h2>\n\n<p>You can <strong>center any column size</strong> by using the proven <code>margin: 0 auto;</code> technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:</p>\n\n<pre><code>.col-centered{\n float: none;\n margin: 0 auto;\n}\n</code></pre>\n\n<p>Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout:</p>\n\n<pre><code><div class=\"row\">\n <div class=\"col-lg-1 col-centered\"></div>\n</div>\n</code></pre>\n\n<p><strong>Note:</strong> With both techniques you could skip the <code>.row</code> element and have the column centered inside a <code>.container</code> but you would notice a minimal difference in the actual column size because of the padding in the container class.</p>\n\n<hr>\n\n<p><strong>Update:</strong></p>\n\n<p>Since v3.0.1 Bootstrap has a built-in class named <code>center-block</code> that uses <code>margin: 0 auto</code> but is missing <code>float:none</code>. You can add that to your CSS to make it work with the grid system.</p>\n", | |
| "source": "so", | |
| "questionId": 18153234 | |
| }, | |
| { | |
| "title": "How to align content of a div to the bottom?", | |
| "body": "<p>Relative+absolute positioning is your best bet:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#header {\r\n position: relative;\r\n min-height: 150px;\r\n}\r\n\r\n#header-content {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n}\r\n\r\n#header, #header * {\r\n background: rgba(40, 40, 100, 0.25);\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div id=\"header\">\r\n <h1>Title</h1>\r\n <div id=\"header-content\">Some content</div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It's just not pretty.</p>\n\n<p>Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.</p>\n\n<p>Example: <a href=\"https://stackoverflow.com/questions/522928/can-you-do-this-html-layout-without-using-tables\">Can you do this HTML layout without using tables?</a></p>\n", | |
| "source": "so", | |
| "questionId": 585945 | |
| }, | |
| { | |
| "title": "What is the difference between visibility:hidden and display:none?", | |
| "body": "<p><code>display:none</code> means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. </p>\n\n<p><code>visibility:hidden</code> means that unlike <code>display:none</code>, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.</p>\n\n<p>For example:</p>\n\n<pre><code>test | <span style=\"[style-tag-value]\">Appropriate style in this tag</span> | test\n</code></pre>\n\n<p>Replacing <code>[style-tag-value]</code> with <code>display:none</code> results in:</p>\n\n<pre><code>test | | test\n</code></pre>\n\n<p>Replacing <code>[style-tag-value]</code> with <code>visibility:hidden</code> results in:</p>\n\n<pre><code>test | | test\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 133051 | |
| }, | |
| { | |
| "title": "How do you keep parents of floated elements from collapsing?", | |
| "body": "<h2>Solution 1:</h2>\n\n<p>The most reliable and unobtrusive method appears to be this:</p>\n\n<p>Demo: <a href=\"http://jsfiddle.net/SO_AMK/wXaEH/\" rel=\"noreferrer\">http://jsfiddle.net/SO_AMK/wXaEH/</a></p>\n\n<p>HTML: </p>\n\n<pre><code><div class=\"clearfix\">\n <div style=\"float: left;\">Div 1</div>\n <div style=\"float: left;\">Div 2</div>\n</div>\n</code></pre>\n\n<p>CSS: </p>\n\n<pre><code>.clearfix::after { \n content: \" \";\n display: block; \n height: 0; \n clear: both;\n}\n</code></pre>\n\n<p>With a little CSS targeting you don't even need to add a class to the parent <code>DIV</code>.</p>\n\n<p>This solution is backwards compatible to IE8 so you don't need to worry about older browsers failing.</p>\n\n<h2>Solution 2:</h2>\n\n<p>An adaptation on solution 1 has been suggested and is as follows:</p>\n\n<p>Demo: <a href=\"http://jsfiddle.net/wXaEH/162/\" rel=\"noreferrer\">http://jsfiddle.net/wXaEH/162/</a></p>\n\n<p>HTML: </p>\n\n<pre><code><div class=\"clearfix\">\n <div style=\"float: left;\">Div 1</div>\n <div style=\"float: left;\">Div 2</div>\n</div>\n</code></pre>\n\n<p>CSS: </p>\n\n<pre><code>.clearfix::after { \n content: \" \";\n display: block; \n height: 0; \n clear: both;\n *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class=\"ie7-clear\"></div>' );\n}\n\n.ie7-clear {\n display: block;\n clear: both;\n}\n</code></pre>\n\n<p>This solution appears to be backwards compatible to IE5.5 but is untested.</p>\n\n<h2>Solution 3:</h2>\n\n<p>It's also possible to set <code>display: inline-block;</code> and <code>width: 100%;</code> to emulate a normal block element while not collapsing.</p>\n\n<p>Demo: <a href=\"http://jsfiddle.net/SO_AMK/ae5ey/\" rel=\"noreferrer\">http://jsfiddle.net/SO_AMK/ae5ey/</a></p>\n\n<p>CSS: </p>\n\n<pre><code>.clearfix {\n display: inline-block;\n width: 100%;\n}\n</code></pre>\n\n<p>This solution should be backwards compatible to IE5.5 but has only been tested in IE6.</p>\n", | |
| "source": "so", | |
| "questionId": 218760 | |
| }, | |
| { | |
| "title": "Adding HTML entities using CSS content", | |
| "body": "<p>You have to use the escaped unicode :</p>\n\n<p>Like </p>\n\n<pre><code>.breadcrumbs a:before {\n content: '\\0000a0';\n}\n</code></pre>\n\n<p>More info on : <a href=\"http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/\" rel=\"nofollow noreferrer\">http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/</a></p>\n", | |
| "source": "so", | |
| "questionId": 190396 | |
| }, | |
| { | |
| "title": "How to force browser to reload cached CSS/JS files?", | |
| "body": "<p><strong>Update:</strong> Rewritten to incorporate suggestions from <strong>John Millikin</strong> and <strong>da5id</strong>. This solution is written in PHP, but should be easily adapted to other languages.</p>\n\n<p><strong>Update 2:</strong> Incorporating comments from <strong>Nick Johnson</strong> that the original <code>.htaccess</code> regex can cause problems with files like <code>json-1.3.js</code>. Solution is to only rewrite if there are exactly 10 digits at the end. (Because 10 digits covers all timestamps from 9/9/2001 to 11/20/2286.)</p>\n\n<p>First, we use the following rewrite rule in .htaccess:</p>\n\n<pre><code>RewriteEngine on\nRewriteRule ^(.*)\\.[\\d]{10}\\.(css|js)$ $1.$2 [L]\n</code></pre>\n\n<p>Now, we write the following PHP function:</p>\n\n<pre class=\"lang-php prettyprint-override\"><code>/**\n * Given a file, i.e. /css/base.css, replaces it with a string containing the\n * file's mtime, i.e. /css/base.1221534296.css.\n * \n * @param $file The file to be loaded. Must be an absolute path (i.e.\n * starting with slash).\n */\nfunction auto_version($file)\n{\n if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))\n return $file;\n\n $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);\n return preg_replace('{\\\\.([^./]+)$}', \".$mtime.\\$1\", $file);\n}\n</code></pre>\n\n<p>Now, wherever you include your CSS, change it from this:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><link rel=\"stylesheet\" href=\"/css/base.css\" type=\"text/css\" />\n</code></pre>\n\n<p>To this:</p>\n\n<pre><code><link rel=\"stylesheet\" href=\"<?php echo auto_version('/css/base.css'); ?>\" type=\"text/css\" />\n</code></pre>\n\n<p>This way, you never have to modify the link tag again, and the user will always see the latest CSS. The browser will be able to cache the CSS file, but when you make any changes to your CSS the browser will see this as a new URL, so it won't use the cached copy.</p>\n\n<p>This can also work with images, favicons, and JavaScript. Basically anything that is not dynamically generated.</p>\n", | |
| "source": "so", | |
| "questionId": 118884 | |
| }, | |
| { | |
| "title": "How to apply CSS to iframe?", | |
| "body": "<p><strong>Edit:</strong> This does not work cross domain unless the appropriate <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS\" rel=\"noreferrer\">CORS header</a> is set.</p>\n\n<p>There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><iframe name=\"iframe1\" id=\"iframe1\" src=\"empty.htm\" \n frameborder=\"0\" border=\"0\" cellspacing=\"0\"\n style=\"border-style: none;width: 100%; height: 120px;\"></iframe>\n</code></pre>\n\n<p>The style of the page embedded in the iframe must be either set by including it in the child page:</p>\n\n<pre class=\"lang-htl prettyprint-override\"><code><link type=\"text/css\" rel=\"Stylesheet\" href=\"Style/simple.css\" />\n</code></pre>\n\n<p>Or it can be loaded from the parent page with Javascript:</p>\n\n<pre class=\"lang-js prettyprint-override\"><code>var cssLink = document.createElement(\"link\");\ncssLink.href = \"style.css\"; \ncssLink.rel = \"stylesheet\"; \ncssLink.type = \"text/css\"; \nframes['iframe1'].document.body.appendChild(cssLink);\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 217776 | |
| }, | |
| { | |
| "title": "What is a clearfix?", | |
| "body": "<h2>If you don't need to support IE9 or lower, you can use flexbox freely, and don't need to use floated layouts.</h2>\n\n<p>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.</p>\n\n<ul>\n<li><code>display: inline-block</code> - Better</li>\n<li><strong><a href=\"https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes\">Flexbox</a></strong> - Best (but limited browser support)</li>\n</ul>\n\n<p>Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android's default browser 4.4.</p>\n\n<p>For a detailed browser list see: <a href=\"http://caniuse.com/flexbox\">http://caniuse.com/flexbox</a>.</p>\n\n<p>(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)</p>\n\n<hr>\n\n<p>A clearfix is a way for an element to <strong>automatically clear its child elements</strong>, so that you don't need to add additional markup. It's generally used in <em>float layouts</em> where elements are floated to be stacked horizontally.</p>\n\n<p>The clearfix is a way to combat the <strong><a href=\"http://complexspiral.com/publications/containing-floats/\">zero-height container problem</a></strong> for floated elements</p>\n\n<p>A clearfix is performed as follows:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.clearfix:after {\n content: \" \"; /* Older browser do not support empty content */\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n}\n</code></pre>\n\n<p>Or, if you don't require IE<8 support, the following is fine too:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.clearfix:after {\n content: \"\";\n display: table;\n clear: both;\n}\n</code></pre>\n\n<p>Normally you would need to do something as follows:</p>\n\n\n\n<pre class=\"lang-html prettyprint-override\"><code><div>\n <div style=\"float: left;\">Sidebar</div>\n <div style=\"clear: both;\"></div> <!-- Clear the float -->\n</div>\n</code></pre>\n\n<p>With clearfix, you only need the following:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><div class=\"clearfix\">\n <div style=\"float: left;\" class=\"clearfix\">Sidebar</div>\n <!-- No Clearing div! -->\n</div>\n</code></pre>\n\n<p>Read about it in <strong><a href=\"http://css-tricks.com/all-about-floats/\">this article - by Chris Coyer @ CSS-Tricks</a></strong></p>\n", | |
| "source": "so", | |
| "questionId": 8554043 | |
| }, | |
| { | |
| "title": "How to center absolutely positioned element in div?", | |
| "body": "<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><body>\r\n <div style=\"position: absolute; left: 50%;\">\r\n <div style=\"position: relative; left: -50%; border: dotted red 1px;\">\r\n I am some centered shrink-to-fit content! <br />\r\n tum te tum\r\n </div>\r\n </div>\r\n</body></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 1776915 | |
| }, | |
| { | |
| "title": "How do I remove the space between inline-block elements?", | |
| "body": "<p>Since this answer has become rather popular, I'm rewriting it significantly.</p>\n\n<p>Let's not forget the actual question that was asked:</p>\n\n<blockquote>\n <p>How to remove the space between <strong>inline-block elements</strong>? I was hoping\n for a CSS solution that doesn't require the HTML source code to be\n tampered with. <strong>Can this issue be solved with CSS alone?</strong></p>\n</blockquote>\n\n<p>It <em>is</em> possible to solve this problem with CSS alone, but there are no <em>completely</em> robust CSS fixes.</p>\n\n<p>The solution I had in my initial answer was to add <code>font-size: 0</code> to the parent element, and then declare a sensible <code>font-size</code> on the children.</p>\n\n<p><a href=\"http://jsfiddle.net/thirtydot/dGHFV/1361/\" rel=\"noreferrer\">http://jsfiddle.net/thirtydot/dGHFV/1361/</a></p>\n\n<p>This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it <em>does</em> work in Safari 6. Safari 5 is nearly a dead browser (<a href=\"http://gs.statcounter.com/#desktop-browser_version_partially_combined-ww-monthly-201408-201508\" rel=\"noreferrer\">0.33%, August 2015</a>).</p>\n\n<p>Most of the possible issues with relative font sizes are not complicated to fix.</p>\n\n<p>However, while this is a reasonable solution if you <em>specifically need</em> a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).</p>\n\n<hr>\n\n<p>This is what I, as a reasonably experienced web developer, actually do to solve this problem:</p>\n\n<pre><code><p>\n <span>Foo</span><span>Bar</span>\n</p>\n</code></pre>\n\n<p>Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.</p>\n\n<p>It's easy. It's simple. It works everywhere. It's the pragmatic solution.</p>\n\n<p>You do sometimes have to carefully consider where whitespace will come from. <em>Will appending another element with JavaScript add whitespace?</em> No, not if you do it properly.</p>\n\n<p>Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:</p>\n\n<pre><code><ul>\n <li>Item 1</li>\n <li>Item 2</li>\n <li>Item 3</li>\n</ul>\n</code></pre>\n\n<ul>\n<li><p>You can do this, as I usually do:</p>\n\n<pre><code><ul>\n <li>Item 1</li><li>Item 2</li><li>Item 3</li>\n</ul>\n</code></pre>\n\n<p><a href=\"http://jsfiddle.net/thirtydot/dGHFV/1362/\" rel=\"noreferrer\">http://jsfiddle.net/thirtydot/dGHFV/1362/</a></p></li>\n<li><p>Or, this:</p>\n\n<pre><code><ul>\n <li>Item 1</li\n ><li>Item 2</li\n ><li>Item 3</li>\n</ul>\n</code></pre></li>\n<li><p>Or, use comments:</p>\n\n<pre><code><ul>\n <li>Item 1</li><!--\n --><li>Item 2</li><!--\n --><li>Item 3</li>\n</ul>\n</code></pre></li>\n<li><p>Or, <a href=\"http://validator.w3.org/check?uri=http%3A%2F%2Fjsbin.com%2FOMoXUHO%2F1%2F&charset=%28detect+automatically%29&doctype=Inline&group=0\" rel=\"noreferrer\">you can</a> even skip <a href=\"http://developers.whatwg.org/syntax.html#optional-tags\" rel=\"noreferrer\">certain</a> closing tags entirely (all browsers are fine with this):</p>\n\n<pre><code><ul>\n <li>Item 1\n <li>Item 2\n <li>Item 3\n</ul>\n</code></pre></li>\n</ul>\n\n<p>Now that I've gone and bored you to death with \"one thousand different ways to remove whitespace, by thirtydot\", hopefully you've forgotten all about <code>font-size: 0</code>.</p>\n\n<hr>\n\n<p>Alternatively, you <a href=\"http://caniuse.com/flexbox\" rel=\"noreferrer\">can now use flexbox</a> to achieve many of the layouts that you may previously have used inline-block for: <a href=\"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\" rel=\"noreferrer\">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></p>\n", | |
| "source": "so", | |
| "questionId": 5078239 | |
| }, | |
| { | |
| "title": "offsetting an html anchor to adjust for fixed header", | |
| "body": "<p>You could just use CSS without any javascript.</p>\n\n<p>Give your anchor a class:</p>\n\n<pre><code><a class=\"anchor\" id=\"top\"></a>\n</code></pre>\n\n<p>You can then position the anchor an offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -250px will position the anchor up 250px</p>\n\n<pre><code>a.anchor {\n display: block;\n position: relative;\n top: -250px;\n visibility: hidden;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 10732690 | |
| }, | |
| { | |
| "title": "Is the recommendation to include CSS before JavaScript invalid?", | |
| "body": "<p>This is a very interesting question. I've always put my CSS <code><link href=\"...\"></code>s before my JS <code><script src=\"...\"></code>s because \"I read one time that it's better.\" So, you're right; it's high time we do some actual research!</p>\n\n<p>I set up my own test harness in Node (code below). Basically, I:</p>\n\n<ul>\n<li>Made sure there was no HTTP caching so the browser would have to do a full download each time a page is loaded.</li>\n<li>To simulate reality, I included jQuery and the <a href=\"http://html5boilerplate.com/\" rel=\"noreferrer\">H5BP</a> CSS (so there's a decent amount of script/CSS to parse)</li>\n<li>Set up two pages - one with CSS before script, one with CSS after script.</li>\n<li>Recorded how long it took for the external script in the <strong><code><head></code></strong> to execute</li>\n<li>Recorded how long it took for the inline script in the <strong><code><body></code></strong> to execute, which is analogous to <code>DOMReady</code>.</li>\n<li>Delayed sending CSS and/or script to the browser by 500ms.</li>\n<li>Ran the test 20 times in the 3 major browsers.</li>\n</ul>\n\n<h1>Results</h1>\n\n<p>First, with the CSS file delayed by 500ms:</p>\n\n<pre><code> Browser: Chrome 18 | IE 9 | Firefox 9\n CSS: first last | first last | first last\n=======================================================\nHeader Exec | | |\nAverage | 583ms 36ms | 559ms 42ms | 565ms 49ms\nSt Dev | 15ms 12ms | 9ms 7ms | 13ms 6ms\n------------|--------------|--------------|------------\nBody Exec | | |\nAverage | 584ms 521ms | 559ms 513ms | 565ms 519ms\nSt Dev | 15ms 9ms | 9ms 5ms | 13ms 7ms\n</code></pre>\n\n<p>Next, I set jQuery to delay by 500ms instead of the CSS:</p>\n\n<pre><code> Browser: Chrome 18 | IE 9 | Firefox 9\n CSS: first last | first last | first last\n=======================================================\nHeader Exec | | |\nAverage | 597ms 556ms | 562ms 559ms | 564ms 564ms\nSt Dev | 14ms 12ms | 11ms 7ms | 8ms 8ms\n------------|--------------|--------------|------------\nBody Exec | | |\nAverage | 598ms 557ms | 563ms 560ms | 564ms 565ms\nSt Dev | 14ms 12ms | 10ms 7ms | 8ms 8ms\n</code></pre>\n\n<p>Finally, I set <strong>both</strong> jQuery and the CSS to delay by 500ms:</p>\n\n<pre><code> Browser: Chrome 18 | IE 9 | Firefox 9\n CSS: first last | first last | first last\n=======================================================\nHeader Exec | | |\nAverage | 620ms 560ms | 577ms 577ms | 571ms 567ms\nSt Dev | 16ms 11ms | 19ms 9ms | 9ms 10ms\n------------|--------------|--------------|------------\nBody Exec | | |\nAverage | 623ms 561ms | 578ms 580ms | 571ms 568ms\nSt Dev | 18ms 11ms | 19ms 9ms | 9ms 10ms\n</code></pre>\n\n<h1>Conclusions</h1>\n\n<p>First, it's important to note that I'm operating under the assumption that you have scripts located in the <code><head></code> of your document (as opposed to the end of the <code><body></code>). There are various arguments regarding why you might link to your scripts in the <code><head></code> versus the end of the document, but that's outside the scope of this answer. This is strictly about whether <code><script></code>s should go before <code><link></code>s in the <code><head></code>.</p>\n\n<p><strong>In modern DESKTOP browsers,</strong> it looks like linking to CSS first <strong>never</strong> provides a performance gain. Putting CSS after script gets you a trivial amount of gain when both CSS and script are delayed, but gives you large gains when CSS is delayed. (Shown by the <code>last</code> columns in the first set of results.)</p>\n\n<p>Given that linking to CSS last does not seem to hurt performance but <em>can</em> provide gains under certain circumstances, <strong>you should link to external stylesheets <em>after</em> you link to external scripts <em>only on desktop browsers</em></strong> if the performance of old browsers is not a concern. <strong>Read on for the mobile situation.</strong></p>\n\n<h1>Why?</h1>\n\n<p>Historically, when a browser encountered a <code><script></code> tag pointing to an external resource, the browser would <strong>stop</strong> parsing the HTML, retrieve the script, execute it, then continue parsing the HTML. In contrast, if the browser encountered a <code><link></code> for an external stylesheet, it would <em>continue</em> parsing the HTML while it fetched the CSS file (in parallel).</p>\n\n<p>Hence, the widely-repeated advice to put stylesheets first – they would download first, and the first script to download could be loaded in parallel.</p>\n\n<p>However, modern browsers (including all of the browsers I tested with above) have implemented <a href=\"https://www.google.com/search?q=speculative+parsing\" rel=\"noreferrer\"><em>speculative parsing</em></a>, where the browser \"looks ahead\" in the HTML and begins downloading resources <em>before</em> scripts download and execute.</p>\n\n<p>In old browsers without speculative parsing, putting scripts first will affect performance since they will not download in parallel.</p>\n\n<h2>Browser Support</h2>\n\n<p>Speculative parsing was first implemented in: (along with the percentage of worldwide desktop browser users using this version or greater as of Jan 2012)</p>\n\n<ul>\n<li>Chrome 1 (WebKit 525) (100%)</li>\n<li>IE 8 (75%)</li>\n<li>Firefox 3.5 (96%)</li>\n<li>Safari 4 (99%)</li>\n<li>Opera 11.60 (85%)</li>\n</ul>\n\n<p>In total, roughly 85% of desktop browsers in use today support speculative loading. Putting scripts before CSS will have a performance penalty on 15% of users <em>globally</em>; YMMV based on your site's specific audience. (And remember that number is shrinking.)</p>\n\n<p>On mobile browsers, it's a little harder to get definitive numbers simply due to how heterogeneous the mobile browser and OS landscape is. Since speculative rendering was implemented in WebKit 525 (released Mar 2008), and just about every worthwhile mobile browser is based on WebKit, we can conclude that \"most\" mobile browsers <em>should</em> support it. According to <a href=\"http://www.quirksmode.org/webkit.html\" rel=\"noreferrer\">quirksmode</a>, iOS 2.2/Android 1.0 use WebKit 525. I have no idea what Windows Phone looks like.</p>\n\n<p><strong>However,</strong> I ran the test on my Android 4 device, and while I saw numbers similar to the desktop results, I hooked it up to the fantastic new <a href=\"http://code.google.com/chrome/mobile/docs/debugging.html\" rel=\"noreferrer\">remote debugger</a> in Chrome for Android, and Network tab showed that the browser was actually waiting to download the CSS until the JavaScripts completely loaded – in other words, <strong>even the newest version of WebKit for Android does not appear to support speculative parsing.</strong> I suspect it might be turned off due to the CPU, memory, and/or network constraints inherent to mobile devices.</p>\n\n<h1>Code</h1>\n\n<p>Forgive the sloppiness – this was Q&D.</p>\n\n<p>app.js</p>\n\n<pre><code>var express = require('express')\n, app = express.createServer()\n, fs = require('fs');\n\napp.listen(90);\n\nvar file={};\nfs.readdirSync('.').forEach(function(f) {\n console.log(f)\n file[f] = fs.readFileSync(f);\n if (f != 'jquery.js' && f != 'style.css') app.get('/' + f, function(req,res) {\n res.contentType(f);\n res.send(file[f]);\n });\n});\n\n\napp.get('/jquery.js', function(req,res) {\n setTimeout(function() {\n res.contentType('text/javascript');\n res.send(file['jquery.js']);\n }, 500);\n});\n\napp.get('/style.css', function(req,res) {\n setTimeout(function() {\n res.contentType('text/css');\n res.send(file['style.css']);\n }, 500);\n});\n\n\nvar headresults={\n css: [],\n js: []\n}, bodyresults={\n css: [],\n js: []\n}\napp.post('/result/:type/:time/:exec', function(req,res) {\n headresults[req.params.type].push(parseInt(req.params.time, 10));\n bodyresults[req.params.type].push(parseInt(req.params.exec, 10));\n res.end();\n});\n\napp.get('/result/:type', function(req,res) {\n var o = '';\n headresults[req.params.type].forEach(function(i) {\n o+='\\n' + i;\n });\n o+='\\n';\n bodyresults[req.params.type].forEach(function(i) {\n o+='\\n' + i;\n });\n res.send(o);\n});\n</code></pre>\n\n<p>css.html</p>\n\n<pre><code><!DOCTYPE html>\n<html>\n <head>\n <title>CSS first</title>\n <script>var start = Date.now();</script>\n <link rel=\"stylesheet\" href=\"style.css\">\n <script src=\"jquery.js\"></script>\n <script src=\"test.js\"></script>\n </head>\n <body>\n <script>document.write(jsload - start);bodyexec=Date.now()</script>\n </body>\n</html>\n</code></pre>\n\n<p>js.html</p>\n\n<pre><code><!DOCTYPE html>\n<html>\n <head>\n <title>CSS first</title>\n <script>var start = Date.now();</script>\n <script src=\"jquery.js\"></script>\n <script src=\"test.js\"></script>\n <link rel=\"stylesheet\" href=\"style.css\">\n </head>\n <body>\n <script>document.write(jsload - start);bodyexec=Date.now()</script>\n </body>\n</html>\n</code></pre>\n\n<p>test.js</p>\n\n<pre><code>var jsload = Date.now();\n\n\n$(function() {\n $.post('/result' + location.pathname.replace('.html','') + '/' + (jsload - start) + '/' + (bodyexec - start));\n});\n</code></pre>\n\n<p>jquery.js was <a href=\"http://code.jquery.com/jquery-1.7.1.min.js\" rel=\"noreferrer\">jquery-1.7.1.min.js</a></p>\n", | |
| "source": "so", | |
| "questionId": 9271276 | |
| }, | |
| { | |
| "title": "How do I vertically align text in a div?", | |
| "body": "<p><strong>Vertical Centering in CSS</strong>\n<br/><a href=\"http://www.jakpsatweb.cz/css/css-vertical-center-solution.html\" rel=\"noreferrer\">http://www.jakpsatweb.cz/css/css-vertical-center-solution.html</a></p>\n\n<p>Article summary:</p>\n\n<p>For CSS2 browser one can use <code>display:table</code>/<code>display:table-cell</code> to center content. </p>\n\n<p>Sample also available at <a href=\"http://jsfiddle.net/SVJaK/\" rel=\"noreferrer\">JSFiddle</a>:</p>\n\n<pre><code> <div style=\"display: table; height: 400px; overflow: hidden;\">\n <div style=\"display: table-cell; vertical-align: middle;\">\n <div>\n everything is vertically centered in modern IE8+ and others.\n </div>\n </div>\n </div>\n</code></pre>\n\n<p>It is possible to merge hacks for old browser (IE6/7) into styles with using <code>#</code> to hide styles from newer browsers:</p>\n\n<pre><code><div style=\"display: table; height: 400px; #position: relative; overflow: hidden;\">\n <div style=\n \" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;\">\n <div style=\" #position: relative; #top: -50%\">\n everything is vertically centered\n </div>\n </div>\n</div>\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 2939914 | |
| }, | |
| { | |
| "title": "What methods of ‘clearfix’ can I use?", | |
| "body": "<p>Depending upon the design being produced, each of the below clearfix CSS solutions has its own benefits.</p>\n\n<p>The clearfix does have useful applications but it has also been used as a hack. Before you use a clearfix perhaps these modern css solutions can be useful:</p>\n\n<ul>\n<li><a href=\"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\" rel=\"nofollow noreferrer\">css flexbox</a></li>\n<li><a href=\"https://css-tricks.com/snippets/css/complete-guide-grid/\" rel=\"nofollow noreferrer\">css grid</a></li>\n</ul>\n\n<hr>\n\n<h1>Modern Clearfix Solutions</h1>\n\n<hr>\n\n<h2>Container with <code>overflow: auto;</code></h2>\n\n<p>The simplest way to clear floated elements is using the style <code>overflow: auto</code> on the containing element. This solution works in every modern browsers.</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><div style=\"overflow: auto;\">\n <img\n style=\"float: right;\"\n src=\"path/to/floated-element.png\"\n width=\"500\"\n height=\"500\"\n > \n <p>Your content here…</p>\n</div>\n</code></pre>\n\n<p>One downside, using certain combinations of margin and padding on the external element can cause scrollbars to appear but this can be solved by placing the margin and padding on another parent containing element.</p>\n\n<p>Using ‘overflow: hidden’ is also a clearfix solution, but will not have scrollbars, however using <code>hidden</code> will crop any content positioned outside of the containing element.</p>\n\n<p><em>Note:</em> The floated element is an <code>img</code> tag in this example, but could be any html element.</p>\n\n<hr>\n\n<h2>Clearfix Reloaded</h2>\n\n<p>Thierry Koblentz on CSSMojo wrote: <a href=\"http://cssmojo.com/the-very-latest-clearfix-reloaded/\" rel=\"nofollow noreferrer\">The very latest clearfix reloaded</a>. He noted that by dropping support for oldIE, the solution can be simplified to one css statement. Additionally, using <code>display: block</code> (instead of <code>display: table</code>) allows margins to collapse properly when elements with clearfix are siblings.</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.container::after {\n content: \"\";\n display: block;\n clear: both;\n}\n</code></pre>\n\n<p>This is the most modern version of the clearfix.</p>\n\n<hr>\n\n<p>⋮</p>\n\n<p>⋮</p>\n\n<h1>Older Clearfix Solutions</h1>\n\n<p>The below solutions are not necessary for modern browsers, but may be useful for targeting older browsers.</p>\n\n<p>Note that these solutions rely upon browser bugs and therefore should be used only if none of the above solutions work for you.</p>\n\n<p>They are listed roughly in chronological order.</p>\n\n<hr>\n\n<h2>\"Beat That ClearFix\", a clearfix for modern browsers</h2>\n\n<p>Thierry Koblentz' of <a href=\"http://www.cssmojo.com/latest_new_clearfix_so_far/\" rel=\"nofollow noreferrer\">CSS Mojo</a> has pointed out that when targeting modern browsers, we can now drop the <code>zoom</code> and <code>::before</code> property/values and simply use:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.container::after {\n content: \"\";\n display: table;\n clear: both;\n}\n</code></pre>\n\n<p><em>This solution does not support for IE 6/7 …on purpose!</em></p>\n\n<p>Thierry also offers: \"<a href=\"http://www.cssmojo.com/latest_new_clearfix_so_far/#why-is-that\" rel=\"nofollow noreferrer\">A word of caution</a>: if you start a new project from scratch, go for it, but don’t swap this technique with the one you have now, because even though you do not support oldIE, your existing rules prevent collapsing margins.\"</p>\n\n<hr>\n\n<h2>Micro Clearfix</h2>\n\n<p>The most recent and globally adopted clearfix solution, the <a href=\"http://nicolasgallagher.com/micro-clearfix-hack/\" rel=\"nofollow noreferrer\">Micro Clearfix by Nicolas Gallagher</a>.</p>\n\n<p><em>Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+</em></p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.container::before, .container::after {\n content: \"\";\n display: table;\n}\n.container::after {\n clear: both;\n}\n.container {\n zoom: 1;\n}\n</code></pre>\n\n<hr>\n\n<h2>Overflow Property</h2>\n\n<p>This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.</p>\n\n<p><a href=\"http://www.quirksmode.org/css/clearing.html\" rel=\"nofollow noreferrer\">http://www.quirksmode.org/css/clearing.html</a>\n- <em>explains how to resolve common issues related to this technique, namely, setting <code>width: 100%</code> on the container.</em></p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.container {\n overflow: hidden;\n display: inline-block;\n display: block;\n}\n</code></pre>\n\n<p>Rather than using the <code>display</code> property to set \"hasLayout\" for IE, other properties can be used for <a href=\"http://www.satzansatz.de/cssd/onhavinglayout.html\" rel=\"nofollow noreferrer\">triggering \"hasLayout\" for an element</a>.</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.container {\n overflow: hidden;\n zoom: 1;\n display: block;\n}\n</code></pre>\n\n<p>Another way to clear floats using the <code>overflow</code> property is to use the <a href=\"http://wellstyled.com/css-underscore-hack.html\" rel=\"nofollow noreferrer\">underscore hack</a>. IE will apply the values prefixed with the underscore, other browsers will not. The <code>zoom</code> property triggers <a href=\"http://www.satzansatz.de/cssd/onhavinglayout.html\" rel=\"nofollow noreferrer\">hasLayout</a> in IE:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.container {\n overflow: hidden;\n _overflow: visible; /* for IE */\n _zoom: 1; /* for IE */\n}\n</code></pre>\n\n<p>While this works... it is not ideal to use hacks.</p>\n\n<hr>\n\n<h2>PIE: Easy Clearing Method</h2>\n\n<p>This older \"Easy Clearing\" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.</p>\n\n<p>This solution is quite old, but you can learn all about Easy Clearing on Position Is Everything: <a href=\"http://www.positioniseverything.net/easyclearing.html\" rel=\"nofollow noreferrer\">http://www.positioniseverything.net/easyclearing.html</a></p>\n\n<hr>\n\n<h2>Element using \"clear\" property</h2>\n\n<p>The quick and dirty solution (with some drawbacks) for when you’re quickly slapping something together:</p>\n\n<pre><code><br style=\"clear: both\" /> <!-- So dirty! -->\n</code></pre>\n\n<h3>Drawbacks</h3>\n\n<ul>\n<li>It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal.</li>\n<li>It adds html markup without necessarily adding any semantic value.</li>\n<li>It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html.</li>\n<li>It makes code difficult to work with for others as they may have to write more hacks to work around it.</li>\n<li>In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <code><br style=\"clear: both\" /></code> tag littered around the markup.</li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 211383 | |
| }, | |
| { | |
| "title": "When to use IMG vs. CSS background-image?", | |
| "body": "<h3>Proper uses of IMG</h3>\n\n<ol>\n<li>Use <code>IMG</code> if you intend to have \npeople <a href=\"https://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492835#492835\">print your page</a> and you want the image to be included by default. \n—<a href=\"https://stackoverflow.com/users/20153/jaytee\">JayTee</a></li>\n<li>Use <code>IMG</code> (with <code>alt</code> text) when the image has an important semantic meaning, such as <a href=\"http://24ways.org/2005/naughty-or-nice-css-background-images\" rel=\"noreferrer\">a warning icon</a>. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.</li>\n\n</ol>\n\n<h3>Pragmatic uses of IMG</h3>\n\n<ol>\n\n<li>Use <code>IMG</code> plus alt attribute if the image \nis <a href=\"http://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492834#492834\">part of the content</a> such as a logo or diagram or person (real person, not stock photo people).\n—<a href=\"http://stackoverflow.com/users/42147/sanchothefat\">sanchothefat</a></li>\n<li>Use <code>IMG</code> if you rely on browser scaling to render an image in proportion to text size.</li>\n<li>Use <code>IMG</code> \nfor <a href=\"http://blog.neatlysliced.com/2007/07/ie6-hides-css-images/\" rel=\"noreferrer\">multiple overlay images in IE6</a>.</li>\n<li><strike>Use <code>IMG</code> with a <code>z-index</code> in order \nto <a href=\"http://www.quackit.com/html/codes/html_stretch_background_image.cfm\" rel=\"noreferrer\">stretch a background image</a> to fill its entire window.</strike><br>Note, this is no longer true with CSS3 background-size; see #6 below.</li>\n<li>Using <code>img</code> instead of <code>background-image</code> can dramatically improve performance of animations over a background.</li>\n</ol>\n\n<h3>When to use CSS background-image</h3>\n\n<ol>\n<li>Use CSS background images if the \nimage <a href=\"https://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492834#492834\">is not part of the content</a>. \n—<a href=\"https://stackoverflow.com/users/42147/sanchothefat\">sanchothefat</a></li>\n<li>Use CSS background images when \ndoing <a href=\"https://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492834#492834\">image-replacement of text</a> eg. paragraphs/headers. \n—<a href=\"https://stackoverflow.com/users/42147/sanchothefat\">sanchothefat</a></li>\n<li>Use <code>background-image</code> if you intend to have \npeople <a href=\"https://stackoverflow.com/questions/492809/when-to-use-img-instead-of-css-background-image/492835#492835\">print your page</a> and you do not want the image to be included by default. \n—<a href=\"https://stackoverflow.com/users/20153/jaytee\">JayTee</a></li>\n<li>Use <code>background-image</code> if you need to improve download times, as \nwith <a href=\"http://css-tricks.com/css-sprites/\" rel=\"noreferrer\">CSS sprites</a>.</li>\n<li>Use <code>background-image</code> if you need for only a portion of the image to be visible, as with CSS sprites.</li>\n<li>Use <code>background-image</code> with <code>background-size:cover</code> in order to stretch a background image to fill its entire window.</li>\n</ol>\n", | |
| "source": "so", | |
| "questionId": 492809 | |
| }, | |
| { | |
| "title": "Font scaling based on width of container", | |
| "body": "<p>What you are looking for is <a href=\"http://dev.w3.org/csswg/css-values/#viewport-relative-lengths\" rel=\"noreferrer\">Viewport-percentage lengths</a>:</p>\n\n<blockquote>\n <p>The <strong>viewport-percentage lengths</strong> are relative to the size of the <a href=\"https://www.w3.org/TR/CSS21/visudet.html#containing-block-details\" rel=\"noreferrer\">initial containing block</a>. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. </p>\n</blockquote>\n\n<p>The values are: </p>\n\n<ul>\n<li><code>vw</code> (% of the viewport width)</li>\n<li><code>vh</code> (% of the viewport height)</li>\n<li><code>vi</code> (1% of the viewport size in the direction of the root element's inline axis)</li>\n<li><code>vb</code> (1% of the viewport size in the direction of the root element's block axis)</li>\n<li><code>vmin</code> (the smaller of <code>vw</code> or <code>vh</code>)</li>\n<li><code>vmax</code> (the larger or <code>vw</code> or <code>vh</code>)</li>\n</ul>\n\n<p>1 v* is equal to 1% of the initial containing block.</p>\n\n<p>using it looks like this:</p>\n\n<pre><code>p {\n font-size: 4vw;\n}\n</code></pre>\n\n<p>As you can see, when the viewport width increases, so does the font-size, without needing to use media queries.</p>\n\n<p>These values are a sizing unit, just like <code>px</code> or <code>em</code>, so they can be used to size other elements as well, such was width, margin, or padding.</p>\n\n<p>Browser support is pretty good, but you'll likely need a fallback, such as:</p>\n\n<pre><code>p {\n font-size: 16px; \n font-size: 4vw;\n}\n</code></pre>\n\n<p>Check out the support statistics: <a href=\"http://caniuse.com/#feat=viewport-units\" rel=\"noreferrer\">http://caniuse.com/#feat=viewport-units</a>. </p>\n\n<p>Also, check out CSS-Tricks for a broader look: <a href=\"http://css-tricks.com/viewport-sized-typography/\" rel=\"noreferrer\">http://css-tricks.com/viewport-sized-typography/</a></p>\n\n<p>Here's a nice article about setting min/max sizes and exercising a bit more control over the sizes: <a href=\"http://madebymike.com.au/writing/precise-control-responsive-typography/\" rel=\"noreferrer\">http://madebymike.com.au/writing/precise-control-responsive-typography/</a></p>\n\n<p>And here's an article about setting your size using calc() so that the text fills the viewport: <a href=\"http://codepen.io/CrocoDillon/pen/fBJxu\" rel=\"noreferrer\">http://codepen.io/CrocoDillon/pen/fBJxu</a></p>\n\n<p>Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. <a href=\"https://css-tricks.com/molten-leading-css/\" rel=\"noreferrer\">https://css-tricks.com/molten-leading-css/</a></p>\n", | |
| "source": "so", | |
| "questionId": 16056591 | |
| }, | |
| { | |
| "title": "How to write a:hover in inline CSS?", | |
| "body": "<p>Short answer: you can't.</p>\n\n<p>Long answer: you shouldn't. </p>\n\n<p>Give it a class name or an id and use stylesheets to apply the style.</p>\n\n<p><code>:hover</code> is a pseudo-selector and, for <a href=\"http://en.wikipedia.org/wiki/Cascading_Style_Sheets\" rel=\"noreferrer\">CSS</a>, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria). </p>\n\n<p>Response to the OP's comments:</p>\n\n<p>See <em><a href=\"http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript\" rel=\"noreferrer\">Totally Pwn CSS with Javascript</a></em> for a good script on adding CSS rules dynamically. Also see <em><a href=\"http://www.quirksmode.org/dom/changess.html\" rel=\"noreferrer\">Change style sheet</a></em> for some of the theory on the subject.</p>\n\n<p>Also, don't forget, you can add links to external stylesheets if that's an option. For example,</p>\n\n<pre><code><script type=\"text/javascript\">\n var link = document.createElement(\"link\");\n link.setAttribute(\"rel\",\"stylesheet\");\n link.setAttribute(\"href\",\"http://wherever.com/yourstylesheet.css\");\n var head = document.getElementsByTagName(\"head\")[0];\n head.appendChild(link);\n</script>\n</code></pre>\n\n<p>Caution: the above assumes there is a <a href=\"https://en.wikipedia.org/wiki/HTML_element#Document_structure_elements\" rel=\"noreferrer\">head</a> section. </p>\n", | |
| "source": "so", | |
| "questionId": 1033156 | |
| }, | |
| { | |
| "title": "Maintain the aspect ratio of a div with CSS", | |
| "body": "<p>Just create a wrapper <code><div></code> with a percentage value for <code>padding-bottom</code>, like this:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>div {\r\n width: 100%;\r\n padding-bottom: 75%;\r\n background: gold; /** <-- For the demo **/\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div></div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>It will result in a <code><div></code> with height equal to 75% of the width of its container (a 4:3 aspect ratio).</p>\n\n<p>This relies on the fact that for padding :</p>\n\n<blockquote>\n <p>The percentage is calculated with respect to the <strong>width</strong> of the generated box's containing block [...] (source: <a href=\"http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties\" rel=\"nofollow noreferrer\">w3.org</a>, emphasis mine)</p>\n</blockquote>\n\n<p>Padding-bottom values for other aspect ratios and 100% width :</p>\n\n<pre><code>aspect ratio | padding-bottom value\n--------------|----------------------\n 16:9 | 56.25%\n 4:3 | 75%\n 3:2 | 66.66%\n 8:5 | 62.5%\n</code></pre>\n\n<hr>\n\n<p><strong>Placing content in the div :</strong></p>\n\n<p>In order to keep the aspect ratio of the div and prevent its content from stretching it, you need to add an absolutely positioned child and stretch it to the edges of the wrapper with:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>div.stretchy-wrapper {\n position: relative;\n}\n\ndiv.stretchy-wrapper > div {\n position: absolute;\n top: 0; bottom: 0; left: 0; right: 0;\n}\n</code></pre>\n\n<p><a href=\"http://dabblet.com/gist/2590942\" rel=\"nofollow noreferrer\">Here's a <strong>demo</strong></a> and another more in depth <a href=\"http://jsbin.com/eqeseb/2/edit\" rel=\"nofollow noreferrer\">demo</a></p>\n", | |
| "source": "so", | |
| "questionId": 1495407 | |
| }, | |
| { | |
| "title": "Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery", | |
| "body": "<p>You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:</p>\n\n<p>In HTML:</p>\n\n<pre><code><span>foo</span>\n</code></pre>\n\n<p>In jQuery:</p>\n\n<pre><code>$('span').hover(function(){\n $(this).attr('data-content','bar');\n});\n</code></pre>\n\n<p>In CSS: </p>\n\n<pre class=\"lang-css prettyprint-override\"><code>span:after {\n content: attr(data-content) ' any other text you may want';\n}\n</code></pre>\n\n<p>If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:</p>\n\n<p>In HTML:</p>\n\n<pre><code><span>foo</span>\n</code></pre>\n\n<p>In jQuery:</p>\n\n<pre><code>$('span').hover(function(){\n $(this).addClass('change').attr('data-content','bar');\n});\n</code></pre>\n\n<p>In CSS: </p>\n\n<pre class=\"lang-css prettyprint-override\"><code>span.change:after {\n content: attr(data-content) ' any other text you may want';\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 5041494 | |
| }, | |
| { | |
| "title": "How can I make Bootstrap columns all the same height?", | |
| "body": "<p><strong>Solution 1 using negative margins (doesn't break responsiveness)</strong> </p>\n\n<p><a href=\"http://jsfiddle.net/nV3Ua/1195/\">Demo</a></p>\n\n<pre><code>.row{\n overflow: hidden; \n}\n\n[class*=\"col-\"]{\n margin-bottom: -99999px;\n padding-bottom: 99999px;\n}\n</code></pre>\n\n<p><strong>Solution 2 using table</strong> </p>\n\n<p><a href=\"http://jsfiddle.net/nV3Ua/1192/\">Demo</a></p>\n\n<pre><code>.row {\n display: table;\n}\n\n[class*=\"col-\"] {\n float: none;\n display: table-cell;\n vertical-align: top;\n}\n</code></pre>\n\n<p><strong>Solution 3 using flex</strong> added August 2015. Comments posted before this don't apply to this solution.</p>\n\n<p><a href=\"http://jsfiddle.net/nV3Ua/1821/\">Demo</a></p>\n\n<pre><code>.row {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n flex-wrap: wrap;\n}\n.row > [class*='col-'] {\n display: flex;\n flex-direction: column;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 19695784 | |
| }, | |
| { | |
| "title": "See :hover state in Chrome Developer Tools", | |
| "body": "<p>Now you can see both the psuedo-class rules and force them on elements. </p>\n\n<p>To see the rules like <code>:hover</code> in the Styles pane click the small <code>:hov</code> text in the top right.</p>\n\n<p><a href=\"https://i.stack.imgur.com/NwulC.png\" rel=\"noreferrer\"><img src=\"https://i.stack.imgur.com/NwulC.png\" alt=\"Toggle element state\"></a></p>\n\n<p>To force an element into <code>:hover</code> state, right click it.</p>\n\n<p><a href=\"https://i.stack.imgur.com/XzMCB.png\" rel=\"noreferrer\"><img src=\"https://i.stack.imgur.com/XzMCB.png\" alt=\"Force element state\"></a></p>\n\n<p>Additional tips on the <a href=\"https://developers.google.com/chrome-developer-tools/docs/shortcuts#elements-panel\" rel=\"noreferrer\" title=\"elements panel\">elements panel</a> in <a href=\"https://developers.google.com/chrome-developer-tools/docs/shortcuts\" rel=\"noreferrer\" title=\"Chrome Developer Tools Shortcuts\">Chrome Developer Tools Shortcuts</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 4515124 | |
| }, | |
| { | |
| "title": "How to disable a link using only CSS?", | |
| "body": "<p>The answer is already in the comments of the question. For more visibility, I am copying <a href=\"http://css-tricks.com/pointer-events-current-nav/\" rel=\"noreferrer\">this solution</a> here:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.not-active {\r\n pointer-events: none;\r\n cursor: default;\r\n text-decoration: none;\r\n color: black;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><a href=\"link.html\" class=\"not-active\">Link</a></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>For browser support, please see <a href=\"https://caniuse.com/#feat=pointer-events\" rel=\"noreferrer\">https://caniuse.com/#feat=pointer-events</a>. If you need to support IE there is a workaround; see <a href=\"https://stackoverflow.com/a/10276157/1207195\">this answer</a>.</p>\n\n<p>Warning: The use of <a href=\"https://developer.mozilla.org/en-US/docs/CSS/pointer-events\" rel=\"noreferrer\"><code>pointer-events</code></a> in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.</p>\n", | |
| "source": "so", | |
| "questionId": 2091168 | |
| }, | |
| { | |
| "title": "How to remove close button on the jQuery UI dialog?", | |
| "body": "<p>I have found this worked in the end (note the third line overriding the open function which find the button and hides it):</p>\n\n<pre><code>$(\"#div2\").dialog({\n closeOnEscape: false,\n open: function(event, ui) {\n $(\".ui-dialog-titlebar-close\", ui.dialog | ui).hide();\n }\n});\n</code></pre>\n\n<p>To hide the close button on all dialogs you can use the following CSS too:</p>\n\n<pre><code>.ui-dialog-titlebar-close {\n visibility: hidden;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 896777 | |
| }, | |
| { | |
| "title": "Using jQuery to center a DIV on the screen", | |
| "body": "<p>I like adding functions to jQuery so this function would help:</p>\n\n<pre><code>jQuery.fn.center = function () {\n this.css(\"position\",\"absolute\");\n this.css(\"top\", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + \n $(window).scrollTop()) + \"px\");\n this.css(\"left\", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + \n $(window).scrollLeft()) + \"px\");\n return this;\n}\n</code></pre>\n\n<p>Now we can just write:</p>\n\n<pre><code>$(element).center();\n</code></pre>\n\n<p>Demo: <a href=\"http://jsfiddle.net/DerekL/GbDw9/\" rel=\"noreferrer\">Fiddle</a> (with added parameter)</p>\n", | |
| "source": "so", | |
| "questionId": 210717 | |
| }, | |
| { | |
| "title": "vertical-align with Bootstrap 3", | |
| "body": "<blockquote>\n <p>This answer presents a hack, but I would highly recommend you to use flexbox (as stated in <a href=\"https://stackoverflow.com/a/25517025/1238019\">@Haschem answer</a>), since it's now supported everywhere.</p>\n</blockquote>\n\n\n\n<blockquote>\n <p><strong>Demos link:</strong> <br/>\n - <a href=\"https://www.bootply.com/jTZdTJGVzq\" rel=\"noreferrer\">Bootstrap 3</a> <br/>\n - <a href=\"http://www.bootply.com/IXiEbZlLvP\" rel=\"noreferrer\">Bootstrap 4 alpha 6</a> <br/></p>\n</blockquote>\n\n<p>You still can use a custom class when you need it:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.vcenter {\r\n display: inline-block;\r\n vertical-align: middle;\r\n float: none;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div class=\"row\">\r\n <div class=\"col-xs-5 col-md-3 col-lg-1 vcenter\">\r\n <div style=\"height:10em;border:1px solid #000\">Big</div>\r\n </div><!--\r\n --><div class=\"col-xs-5 col-md-7 col-lg-9 vcenter\">\r\n <div style=\"height:3em;border:1px solid #F00\">Small</div>\r\n </div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><strong><a href=\"http://www.bootply.com/dFP81frbHk\" rel=\"noreferrer\">Bootply</a></strong></p>\n\n<p>Using <code>inline-block</code> adds extra space between blocks if you let a real space in your code (like <code>...</div> </div>...</code>). This extra space breaks our grid if column sizes add up to 12:</p>\n\n<pre><code><div class=\"row\">\n <div class=\"col-xs-6 col-md-4 col-lg-2 vcenter\">\n <div style=\"height:10em;border:1px solid #000\">Big</div>\n </div>\n <div class=\"col-xs-6 col-md-8 col-lg-10 vcenter\">\n <div style=\"height:3em;border:1px solid #F00\">Small</div>\n </div>\n</div>\n</code></pre>\n\n<p>Here, we've got extra spaces between <code><div class=\"[...] col-lg-2\"></code> and <code><div class=\"[...] col-lg-10\"></code> (a carriage return and 2 tabs/8 spaces). And so...</p>\n\n<p><img src=\"https://i.stack.imgur.com/2Yzby.png\" alt=\"Enter image description here\"></p>\n\n<p>Let's kick this extra space!!</p>\n\n<pre><code><div class=\"row\">\n <div class=\"col-xs-6 col-md-4 col-lg-2 vcenter\">\n <div style=\"height:10em;border:1px solid #000\">Big</div>\n </div><!--\n --><div class=\"col-xs-6 col-md-8 col-lg-10 vcenter\">\n <div style=\"height:3em;border:1px solid #F00\">Small</div>\n </div>\n</div>\n</code></pre>\n\n<p><img src=\"https://i.stack.imgur.com/XZTJj.png\" alt=\"Enter image description here\"></p>\n\n<p>Notice the <em>seemingly</em> useless comments <code><!-- ... --></code>? They are <strong>important</strong> -- without them, the whitespace between the <code><div></code> elements will take up space in the layout, breaking the grid system.</p>\n\n<p><em>Note: the Bootply has been updated</em></p>\n", | |
| "source": "so", | |
| "questionId": 20547819 | |
| }, | |
| { | |
| "title": "How can I remove a style added with .css() function?", | |
| "body": "<p>Changing the property to an empty string appears to do the job.</p>\n\n<p><code>$.css(\"background-color\", \"\");</code></p>\n", | |
| "source": "so", | |
| "questionId": 4036857 | |
| }, | |
| { | |
| "title": "Stretch and scale a CSS image in the background - with CSS only", | |
| "body": "<p>CSS3 has a nice little attribute called <code>background-size:cover</code>.</p>\n\n<p>This scales the image so that the background area is completely covered by the background image whilst maintaining aspect ratio. The entire area will be covered however part of the image may not be visible if the width/height of the resized image is too great</p>\n", | |
| "source": "so", | |
| "questionId": 1150163 | |
| }, | |
| { | |
| "title": "CSS 100% height with padding/margin", | |
| "body": "<p>I learned how to do these sort of things reading \"<a href=\"http://cssdesignpatterns.com/\" rel=\"noreferrer\">PRO HTML and CSS Design Patterns</a>\". The <code>display:block</code> is the default display value for the <code>div</code>, but I like to make it explicit. The container has to be the right type; <code>position</code> attribute is <code>fixed</code>, <code>relative</code>, or <code>absolute</code>.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.stretchedToMargin {\r\n display: block;\r\n position:absolute;\r\n height:auto;\r\n bottom:0;\r\n top:0;\r\n left:0;\r\n right:0;\r\n margin-top:20px;\r\n margin-bottom:20px;\r\n margin-right:80px;\r\n margin-left:80px;\r\n background-color: green;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div class=\"stretchedToMargin\">\r\n Hello, world\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><a href=\"http://jsfiddle.net/Rpdr9/\" rel=\"noreferrer\">Fiddle</a> by Nooshu's <a href=\"https://stackoverflow.com/questions/485827/css-100-height-with-padding-margin#comment2356498_485887\">comment</a></p>\n", | |
| "source": "so", | |
| "questionId": 485827 | |
| }, | |
| { | |
| "title": "How to overlay one div over another div", | |
| "body": "<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#container {\r\n width: 100px;\r\n height: 100px;\r\n position: relative;\r\n}\r\n#navi,\r\n#infoi {\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}\r\n#infoi {\r\n z-index: 10;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div id=\"container\">\r\n <div id=\"navi\">a</div>\r\n <div id=\"infoi\">\r\n <img src=\"https://appharbor.com/assets/images/stackoverflow-logo.png\" height=\"20\" width=\"32\" />b\r\n </div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>I would suggest learning about <code>position: relative</code> and child elements with <code>position: absolute</code>.</p>\n", | |
| "source": "so", | |
| "questionId": 2941189 | |
| }, | |
| { | |
| "title": "Sass Variable in CSS calc() function", | |
| "body": "<p>Interpolate:</p>\n\n<pre><code>body\n height: calc(100% - #{$body_padding})\n</code></pre>\n\n<p>For this case, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Values\" rel=\"noreferrer\">border-box</a> would also suffice:</p>\n\n<pre><code>body\n box-sizing: border-box\n height: 100%\n padding-top: $body_padding\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 17982111 | |
| }, | |
| { | |
| "title": "How to align a <div> to the middle (horizontally/width) of the page", | |
| "body": "<pre><code><body>\n <div style=\"width:800px; margin:0 auto;\">\n centered content\n </div>\n</body>\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 953918 | |
| }, | |
| { | |
| "title": "Why em instead of px?", | |
| "body": "<p>The reason I asked this question was because I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested how to define styles on <strong>any given block element</strong> on the page.</p>\n\n<p>As <a href=\"https://stackoverflow.com/questions/609517/why-em-instead-of-px/609541#609541\">Henrik Paul</a> and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px however sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys <kbd>Ctrl</kbd>+<kbd>+</kbd> or <kbd>Ctrl</kbd>+<kbd>-</kbd>. So a good practice is to use em's instead. </p>\n\n<h2>Using px to define width</h2>\n\n<p>Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have html-code that looks like this:</p>\n\n<pre><code><div class=\"date-box\">\n <p class=\"month\">July</p>\n <p class=\"day\">4</p>\n</div>\n</code></pre>\n\n<p>A simple implementation would defining the width of the <code>date-box</code> class in px:</p>\n\n<pre><code>* { margin: 0; padding: 0; }\n\np.month { font-size: 10pt; }\n\np.day { font-size: 24pt; font-weight: bold; }\n\ndiv.date-box {\n background-color: #DD2222;\n font-family: Arial, sans-serif;\n color: white;\n width: 50px;\n}\n</code></pre>\n\n<h2>The problem</h2>\n\n<p>However if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as <a href=\"https://stackoverflow.com/questions/609517/why-em-instead-of-px/609543#609543\">flodin</a> points out. This is because the box will remain the same size in width as it is locked to <code>50px</code>. </p>\n\n<h2>Using em instead</h2>\n\n<p>A smarter way is to define the width in ems instead:</p>\n\n<pre><code>div.date-box {\n background-color: #DD2222;\n font-family: Arial, sans-serif;\n color: white;\n width: 2.5em;\n}\n\n* { margin: 0; padding: 0; font-size: 10pt; }\n\n// Initial width of date-box = 10 pt x 2.5 em = 25 pt\n// Will also work if you used px instead of pt\n</code></pre>\n\n<p>That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example the font-size is defined in <code>*</code> as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.</p>\n", | |
| "source": "so", | |
| "questionId": 609517 | |
| }, | |
| { | |
| "title": "Can I hide the HTML5 number input’s spin box?", | |
| "body": "<p>This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):</p>\n\n<pre><code>input::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n /* display: none; <- Crashes Chrome on hover */\n -webkit-appearance: none;\n margin: 0; /* <-- Apparently some margin are still there even though it's hidden */\n}\n</code></pre>\n\n<p>You can always use the inspector (webkit, possibly Firebug for Firefox) to look for matched CSS properties for the elements you are interested in, look for Pseudo elemnts. This image shows results for an input element type=\"number\":</p>\n\n<p><img src=\"https://i.stack.imgur.com/QATjk.png\" alt=\"Inspector for input type=number (Chrome)\"></p>\n", | |
| "source": "so", | |
| "questionId": 3790935 | |
| }, | |
| { | |
| "title": "Why not use tables for layout in HTML?", | |
| "body": "<p>I'm going to go through your arguments one after another and try to show the errors in them. </p>\n\n<blockquote>\n <p>It's good to separate content from layout\n But this is a fallacious argument; Cliché Thinking.</p>\n</blockquote>\n\n<p>It's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <code><table></code> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<code><table></code> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <code><table></code>s behave, and thus breaking cases where it was previously misused.</p>\n\n<blockquote>\n <p>So what? Does my boss care? Do my users care?</p>\n</blockquote>\n\n<p>Depends. Is your boss pointy-haired? Then he might not care. If she's competent, then she will care, because the users <a href=\"http://www.hotdesign.com/seybold/\" rel=\"nofollow noreferrer\">will</a>.</p>\n\n<blockquote>\n <p>Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is easier than using divs and css.</p>\n</blockquote>\n\n<p><del>The majority of professional web developers seem to oppose you</del><sup>[<em>citation needed</em>]</sup>. That tables <em>are</em> in fact less maintainable should be obvious. Using tables for layout means that changing the corporate layout will in fact mean changing every single page. This can be <em>very</em> expensive. On the other hand, judicious use of semantically meaningful HTML combined with CSS <em>might</em> confine such changes to the CSS and the pictures used.</p>\n\n<blockquote>\n <p>By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs.</p>\n</blockquote>\n\n<p>Deeply nested <code><div></code>s are an anti-pattern just as table layouts. Good web designers don't need many of them. On the other hand, even such deep-nested divs don't have many of the problems of table layouts. In fact, they can even contribute to a semantic structure by logically dividing the content in parts.</p>\n\n<blockquote>\n <p>Readability of the code\n I think it's the other way around. Most people understand html, little understand css. It's simpler.</p>\n</blockquote>\n\n<p>“Most people” don't matter. Professionals matter. For professionals, table layouts create many more problems than HTML + CSS. This is like saying I shouldn't use GVim or Emacs because Notepad is simpler for most people. Or that I shouldn't use LaTeX because MS Word is simpler for most people.</p>\n\n<blockquote>\n <p>It's better for SEO not to use tables</p>\n</blockquote>\n\n<p>I don't know if this is true and wouldn't use this as an argument but it would be logical. Search engines search for <em>relevant</em> data. While tabular data could of course be relevant, it's rarely what users search for. Users search for terms used in the page title or similarly prominent positions. It would therefore be logical to exclude tabular content from filtering and thus cutting the processing time (and costs!) by a large factor.</p>\n\n<blockquote>\n <p>Tables are slower.\n An extra tbody element has to be inserted. This is peanuts for modern web browsers.</p>\n</blockquote>\n\n<p>The extra element has got nothing to do with tables being slower. On the other hand, the layout algorithm for tables is much harder, the browser often has to wait for the whole table to load before it can begin to layout the content. Additionally, caching of the layout won't work (CSS can easily be cached). All this has been mentioned before. </p>\n\n<blockquote>\n <p>Show me some benchmarks where the use of a table significantly slows down a page.</p>\n</blockquote>\n\n<p>Unfortunately, I don't have any benchmark data. I would be interested in it myself because it's right that this argument lacks a certain scientific rigour.</p>\n\n<blockquote>\n <p>Most web sites that need an upgrade need new content (html) as well. Scenarios where a new version of a web site only needs a new css file are not very likely.</p>\n</blockquote>\n\n<p>Not at all. I've worked on several cases where changing the design was simplified by a separation of content and design. It's often still necessary to change some HTML code but the changes will always be much more confined. Additionally, design changes must on occasion be made dynamically. Consider template engines such as the one used by the WordPress blogging system. Table layouts would literally kill this system. I've worked on a similar case for a commercial software. Being able to change the design without changing the HTML code was one of the business requirements.</p>\n\n<p>Another thing. Table layout makes automated parsing of websites (screen scraping) much harder. This might sound trivial because, after all, who does it? I was surprised myself. Screen scraping can help a lot if the service in question doesn't offer a WebService alternative to access its data. I'm working in bioinformatics where this is a sad reality. Modern web techniques and WebServices have not reached most developers and often, screen scraping is the only way to automate the process of getting data. No wonder that many biologists still perform such tasks manually. For thousands of data sets.</p>\n", | |
| "source": "so", | |
| "questionId": 83073 | |
| }, | |
| { | |
| "title": "CSS selector for first element with class", | |
| "body": "<p>This is one of the most well-known examples of authors misunderstanding how <code>:first-child</code> works. <a href=\"http://www.w3.org/TR/CSS21/selector.html#first-child\" rel=\"noreferrer\">Introduced in CSS2</a>, the <code>:first-child</code> pseudo-class represents <strong>the very first child of its parent</strong>. That's it. There's a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector. Due to the way selectors work (see <a href=\"https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector/5546296#5546296\">here</a> for an explanation), that is simply not true.</p>\n\n<p><a href=\"http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo\" rel=\"noreferrer\">Selectors level 3 introduces a <code>:first-of-type</code> pseudo-class</a>, which represents the first element among siblings of its element type. <a href=\"https://stackoverflow.com/questions/24657555/what-is-the-difference-between-first-child-and-first-of-type/24657721#24657721\">This answer</a> explains, with illustrations, the difference between <code>:first-child</code> and <code>:first-of-type</code>. However, as with <code>:first-child</code>, it does not look at any other conditions or attributes. In HTML, the element type is represented by the tag name. In the question, that type is <code>p</code>.</p>\n\n<p>Unfortunately, there is no similar <code>:first-of-class</code> pseudo-class for matching the first child element of a given class. One workaround that <a href=\"https://stackoverflow.com/questions/5287272/css-select-first-element-with-a-certain-class/5293095#5293095\">Lea Verou</a> and I came up with for this (albeit totally independently) is to first apply your desired styles to <em>all</em> your elements with that class:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>/* \n * Select all .red children of .home, including the first one,\n * and give them a border.\n */\n.home > .red {\n border: 1px solid red;\n}\n</code></pre>\n\n<p>... then \"undo\" the styles for elements with the class that <em>come after the first one</em>, using <a href=\"http://www.w3.org/TR/selectors/#general-sibling-combinators\" rel=\"noreferrer\">the general sibling combinator <code>~</code></a> in an overriding rule:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>/* \n * Select all but the first .red child of .home,\n * and remove the border from the previous rule.\n */\n.home > .red ~ .red {\n border: none;\n}\n</code></pre>\n\n<p>Now only the first element with <code>class=\"red\"</code> will have a border.</p>\n\n<p>Here's an illustration of how the rules are applied:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><div class=\"home\">\n <span>blah</span> <!-- [1] -->\n <p class=\"red\">first</p> <!-- [2] -->\n <p class=\"red\">second</p> <!-- [3] -->\n <p class=\"red\">third</p> <!-- [3] -->\n <p class=\"red\">fourth</p> <!-- [3] -->\n</div>\n</code></pre>\n\n<ol>\n<li><p><strong>No rules are applied; no border is rendered.</strong><br>\nThis element does not have the class <code>red</code>, so it's skipped.</p></li>\n<li><p><strong>Only the first rule is applied; a red border is rendered.</strong><br>\nThis element has the class <code>red</code>, but it's not preceded by any elements with the class <code>red</code> in its parent. Thus the second rule is not applied, only the first, and the element keeps its border.</p></li>\n<li><p><strong>Both rules are applied; no border is rendered.</strong><br>\nThis element has the class <code>red</code>. It is also preceded by at least one other element with the class <code>red</code>. Thus both rules are applied, and the second <code>border</code> declaration overrides the first, thereby \"undoing\" it, so to speak.</p></li>\n</ol>\n\n<p>As a bonus, although it was introduced in Selectors 3, the general sibling combinator is actually pretty well-supported by IE7 and newer, unlike <code>:first-of-type</code> and <code>:nth-of-type()</code> which are only supported by IE9 onward. If you need good browser support, you're in luck.</p>\n\n<p>In fact, the fact that the sibling combinator is the only important component in this technique, <em>and</em> it has such amazing browser support, makes this technique very versatile — you can adapt it for filtering elements by other things, besides class selectors:</p>\n\n<ul>\n<li><p>You can use this to work around <code>:first-of-type</code> in IE7 and IE8, by simply supplying a type selector instead of a class selector (again, more on its incorrect usage here in a later section):</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>article > p {\n /* Apply styles to article > p:first-of-type, which may or may not be :first-child */\n}\n\narticle > p ~ p {\n /* Undo the above styles for every subsequent article > p */\n}\n</code></pre></li>\n<li><p>You can filter by <a href=\"https://stackoverflow.com/questions/7128406/css-select-the-first-child-from-elements-with-particular-attribute/7128429#7128429\">attribute selectors</a> or any other simple selectors instead of classes.</p></li>\n<li><p>You can also combine this overriding technique with <a href=\"https://stackoverflow.com/questions/8535686/first-child-not-working/8535800#8535800\">pseudo-elements</a> even though pseudo-elements technically aren't simple selectors.</p></li>\n</ul>\n\n<p>Note that in order for this to work, you will need to know in advance what the default styles will be for your other sibling elements so you can override the first rule. Additionally, since this involves overriding rules in CSS, you can't achieve the same thing with a single selector for use with the <a href=\"http://www.w3.org/TR/selectors-api\" rel=\"noreferrer\">Selectors API</a>, or <a href=\"http://seleniumhq.org\" rel=\"noreferrer\">Selenium</a>'s CSS locators.</p>\n\n<p>It's worth mentioning that Selectors 4 introduces <a href=\"http://dev.w3.org/csswg/selectors-4/#the-nth-child-pseudo\" rel=\"noreferrer\">an extension to the <code>:nth-child()</code> notation</a> (originally an entirely new pseudo-class called <code>:nth-match()</code>), which will allow you to use something like <code>:nth-child(1 of .red)</code> in lieu of a hypothetical <code>.red:first-of-class</code>. Being a relatively recent proposal, there aren't enough interoperable implementations for it to be usable in production sites yet. Hopefully this will change soon. In the meantime, the workaround I've suggested should work for most cases.</p>\n\n<p>Keep in mind that this answer assumes that the question is looking for every first child element that has a given class. There is neither a pseudo-class nor even a generic CSS solution for the nth match of a complex selector <em>across the entire document</em> — whether a solution exists depends heavily on the document structure. jQuery provides <code>:eq()</code>, <code>:first</code>, <code>:last</code> and more for this purpose, but note again that <a href=\"https://stackoverflow.com/questions/9983297/difference-between-css-selector-and-jquery-filter/10835694#10835694\">they function very differently from <code>:nth-child()</code> et al</a>. Using the Selectors API, you can either use <code>document.querySelector()</code> to obtain the very first match:</p>\n\n<pre><code>var first = document.querySelector('.home > .red');\n</code></pre>\n\n<p>Or use <code>document.querySelectorAll()</code> with an indexer to pick any specific match:</p>\n\n<pre><code>var redElements = document.querySelectorAll('.home > .red');\nvar first = redElements[0];\nvar second = redElements[1];\n// etc\n</code></pre>\n\n<hr>\n\n<p>Although the <code>.red:nth-of-type(1)</code> solution in the original accepted answer by <a href=\"https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/2717515#2717515\">Philip Daubmeier</a> works (which was originally written by <a href=\"https://stackoverflow.com/users/264276/martyn\">Martyn</a> but deleted since), it does not behave the way you'd expect it to.</p>\n\n<p>For example, if you only wanted to select the <code>p</code> in your original markup:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><p class=\"red\"></p>\n<div class=\"red\"></div>\n</code></pre>\n\n<p>... then you can't use <code>.red:first-of-type</code> (equivalent to <code>.red:nth-of-type(1)</code>), because each element is the first (and only) one of its type (<code>p</code> and <code>div</code> respectively), so <em>both</em> will be matched by the selector.</p>\n\n<p>When the first element of a certain class <em>is also the first of its type</em>, the pseudo-class will work, but <strong>this happens only by coincidence</strong>. This behavior is demonstrated in Philip's answer. The moment you stick in an element of the same type before this element, the selector will fail. Taking the updated markup:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><div class=\"home\">\n <span>blah</span>\n <p class=\"red\">first</p>\n <p class=\"red\">second</p>\n <p class=\"red\">third</p>\n <p class=\"red\">fourth</p>\n</div>\n</code></pre>\n\n<p>Applying a rule with <code>.red:first-of-type</code> will work, but once you add another <code>p</code> without the class:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><div class=\"home\">\n <span>blah</span>\n <p>dummy</p>\n <p class=\"red\">first</p>\n <p class=\"red\">second</p>\n <p class=\"red\">third</p>\n <p class=\"red\">fourth</p>\n</div>\n</code></pre>\n\n<p>... the selector will immediately fail, because the first <code>.red</code> element is now the <em>second</em> <code>p</code> element.</p>\n", | |
| "source": "so", | |
| "questionId": 2717480 | |
| }, | |
| { | |
| "title": "Managing CSS Explosion", | |
| "body": "<p>This is a very good question. Everywhere I look, CSS files tend to get out of control after a while - especially, but not only, when working in a team.</p>\n\n<p>The following are the rules I am myself trying to adhere to (not that I always manage to.)</p>\n\n<ul>\n<li><p><strong>Refactor early, refactor often.</strong> Frequently clean up CSS files, fuse together multiple definitions of the same class. Remove obsolete definitions <em>immediately</em>.</p></li>\n<li><p>When adding CSS during fixing bugs, leave a comment as to what the change does (\"This is to make sure the box is left aligned in IE < 7\")</p></li>\n<li><p>Avoid redundancies, e.g. defining the same thing in <code>.classname</code> and <code>.classname:hover</code>.</p></li>\n<li><p>Use comments <code>/** Head **/</code> to build a clear structure.</p></li>\n<li><p>Use a prettifier tool that helps maintain a constant style. I use <a href=\"http://www.polystyle.com/\" rel=\"noreferrer\"><strong>Polystyle</strong></a>, with which I'm quite happy (costs $15 but is money well spent). I'm sure there are free ones around as well (Update: like for example <a href=\"http://www.codebeautifier.com/\" rel=\"noreferrer\"><strong>Code Beautifier</strong></a> based on <a href=\"http://csstidy.sourceforge.net/\" rel=\"noreferrer\"><strong>CSS Tidy</strong></a>, an open-source tool I've not used myself yet but looks very interesting.)</p></li>\n<li><p>Build sensible classes. See below for a few notes on this.</p></li>\n<li><p>Use semantics, avoid DIV soup - use <code><ul></code>s for menus, for example. </p></li>\n<li><p>Define everything on as low a level as possible (e.g. a default font family, colour and size in the <code>body</code>) and use <code>inherit</code> where possible</p></li>\n<li><p>If you have very complex CSS, maybe a CSS pre-compiler helps. I'm planning to look into <a href=\"http://xcss.antpaw.org/\" rel=\"noreferrer\"><strong>xCSS</strong></a> for the very same reason soon. There are several others around.</p></li>\n<li><p>If working in a team, highlight the necessity of quality and standards for CSS files as well. Everybody's big on coding standards in their programming language(s), but there is little awareness that this is necessary for CSS too.</p></li>\n<li><p>If working in a team, <em>do</em> consider using Version Control. It makes things that much easier to track, and editing conflicts that much easier to solve. It's really worth it, even if you're \"just\" into HTML and CSS.</p></li>\n<li><p>Do not work with <code>!important</code>. Not only because IE =< 7 can't deal with it. In a complex structure, the use of !important is often tempting to change a behaviour whose source can't be found, but it's <em>poison</em> for long-term maintenance.</p></li>\n</ul>\n\n<p><strong>Building sensible classes</strong></p>\n\n<p>This is how I like to build sensible classes. </p>\n\n<p>I apply global settings first:</p>\n\n<pre><code>body { font-family: .... font-size ... color ... }\na { text-decoration: none; }\n</code></pre>\n\n<p>Then, I identify the main sections of the page's layout - e.g. the top area, the menu, the content, and the footer. <strong>If I wrote good markup, these areas will be identical with the HTML structure.</strong> </p>\n\n<p>Then, I start building CSS classes, specifying as much ancestry as possible and sensible, and grouping related classes as closely as possible.</p>\n\n<pre><code>div.content ul.table_of_contents \ndiv.content ul.table_of_contents li \ndiv.content ul.table_of_contents li h1\ndiv.content ul.table_of_contents li h2\ndiv.content ul.table_of_contents li span.pagenumber\n</code></pre>\n\n<p>Think of the whole CSS structure as a <em>tree</em> with increasingly specific definitions the further away from the root you are. You want to keep the number of classes as low as possible, and you want to repeat yourself as seldom as possible.</p>\n\n<p>For example, let's say you have three levels of navigational menus.\nThese three menus look different, but they also share certain characteristics. For example, they are all <code><ul></code>, they all have the same font size, and the items are all next to each other (as opposed to the default rendering of an <code>ul</code>). Also, none of the menus has any bullet points (<code>list-style-type</code>).</p>\n\n<p>First, define the <em>common</em> characteristics into a class named <code>menu</code>:</p>\n\n<pre><code>div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }\ndiv.navi ul.menu li { float: left }\n</code></pre>\n\n<p>then, define the specific characteristics of each of the three menus. Level 1 is 40 pixels tall; levels 2 and 3 20 pixels.</p>\n\n<p><strong>Note:</strong> you could also use multiple classes for this but Internet Explorer 6 <a href=\"https://stackoverflow.com/questions/312022/use-double-classes-in-ie6-css\"><strong>has problems with multiple classes</strong></a>, so this example uses <code>id</code>s.</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>div.navi ul.menu#level1 { height: 40px; }\ndiv.navi ul.menu#level2 { height: 20px; }\ndiv.navi ul.menu#level3 { height: 16px; }\n</code></pre>\n\n<p>The markup for the menu will look like this:</p>\n\n<pre><code><ul id=\"level1\" class=\"menu\"><li> ...... </li></ul>\n<ul id=\"level2\" class=\"menu\"><li> ...... </li></ul>\n<ul id=\"level3\" class=\"menu\"><li> ...... </li></ul>\n</code></pre>\n\n<p>If you have semantically similar elements on the page - like these three menus - try to work out the commonalities first and put them into a class; then, work out the specific properties and apply them to classes or, if you have to support Internet Explorer 6, ID's.</p>\n\n<p><strong>Miscellaneous HTML tips</strong></p>\n\n<blockquote>\n <p>If you add these semantics into your HTML output, designers can later customize the look of web sites and/or apps using pure CSS, which is a great advantage and time-saver.</p>\n</blockquote>\n\n<ul>\n<li><p>If possible, give every page's body a unique class: <code><body class='contactpage'></code> this makes it very easy to add page-specific tweaks to the style sheet: </p>\n\n<pre><code>body.contactpage div.container ul.mainmenu li { color: green }\n</code></pre></li>\n<li><p>When building menus automatically, add as much CSS context as possible to allow extensive styling later. For example:</p>\n\n<pre><code><ul class=\"mainmenu\">\n <li class=\"item_first item_active item_1\"> First item </li> \n <li class=\"item_2\"> Second item </li> \n <li class=\"item_3\"> Third item </li> \n <li class=\"item_last item_4\"> Fourth item </li> \n</ul>\n</code></pre>\n\n<p>This way, every menu item can be accessed for styling according to its semantic context: Whether it's the first or last item in the list; Whether it's the currently active item; and by number.</p></li>\n</ul>\n\n<blockquote>\n <p><strong>Note</strong> that this assigning of multiple classes as outlined in the example above <a href=\"https://stackoverflow.com/questions/312022/use-double-classes-in-ie6-css\"><strong>does not work properly in IE6</strong></a>. There is a <a href=\"http://code.google.com/p/ie7-js/\" rel=\"noreferrer\"><strong>workaround</strong></a> to make IE6 able to deal with multiple classes; I haven't tried it yet but looks very promising, coming from Dean Edwards. Until then, you will have to set the class that is most important to you (item number, active or first/last) or resort to using IDs. (booo IE6!)</p>\n</blockquote>\n", | |
| "source": "so", | |
| "questionId": 2253110 | |
| }, | |
| { | |
| "title": "Is it possible to include one CSS file in another?", | |
| "body": "<p>Yes:</p>\n\n<pre><code>@import url(\"base.css\");\n</code></pre>\n\n<p>Note:</p>\n\n<ul>\n<li>The <code>@import</code> rule must <a href=\"http://www.w3.org/TR/CSS2/cascade.html#at-import\" rel=\"noreferrer\">precede</a> all other rules (except the <code>@charset</code> rule); and</li>\n<li>Additional <code>@import</code> statements require additional server requests.</li>\n</ul>\n\n<p>Aggregate CSS into one file to avoid multiple HTTP requests. That is, copy the contents of <code>base.css</code> and <code>special.css</code> into <code>base-special.css</code> and reference only <code>base-special.css</code>).</p>\n\n<p>In 2008, not all browsers supported <code>@import</code> (see <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/@import#Browser_compatibility\" rel=\"noreferrer\">Browser Compatibility</a>).</p>\n", | |
| "source": "so", | |
| "questionId": 147500 | |
| }, | |
| { | |
| "title": "Space between two rows in a table?", | |
| "body": "<p>You need to use padding on your <code>td</code> elements. Something like this should do the trick. You can, of course, get the same result using a top padding instead of a bottom padding.</p>\n\n<p>In the CSS code below, the greater-than sign means that the padding is only applied to <code>td</code> elements that are direct children to <code>tr</code> elements with the class <code>spaceUnder</code>. This will make it possible to use nested tables. (Cell C and D in the example code.) I'm not too sure about browser support for the direct child selector (think IE 6), but it shouldn't break the code in any modern browsers.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */\r\n\r\ntr.spaceUnder>td {\r\n padding-bottom: 1em;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><table>\r\n <tbody>\r\n <tr>\r\n <td>A</td>\r\n <td>B</td>\r\n </tr>\r\n <tr class=\"spaceUnder\">\r\n <td>C</td>\r\n <td>D</td>\r\n </tr>\r\n <tr>\r\n <td>E</td>\r\n <td>F</td>\r\n </tr>\r\n </tbody>\r\n</table></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>This should render somewhat like this:</p>\n\n<pre><code>+---+---+\n| A | B |\n+---+---+\n| C | D |\n| | |\n+---+---+\n| E | F |\n+---+---+\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 351058 | |
| }, | |
| { | |
| "title": "CSS opacity only to background color not the text on it?", | |
| "body": "<p>It sounds like you want to use a transparent background, in which case you could try using the <a href=\"https://developer.mozilla.org/en-US/docs/CSS/color_value#css-rgba\" rel=\"noreferrer\"><code>rgba()</code></a> function:</p>\n\n<blockquote>\n <h3><code>rgba()</code></h3>\n \n <p>Colors can be defined in the Red-green-blue-alpha model (RGBa) using the <code>rgba()</code> functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color.<br>\n <code>a</code> means opacity: 0=transparent; 1=opaque;</p>\n\n<pre><code>rgba(255,0,0,0.1) /* 10% opaque red */ \nrgba(255,0,0,0.4) /* 40% opaque red */ \nrgba(255,0,0,0.7) /* 70% opaque red */ \nrgba(255,0,0, 1) /* full opaque red */ \n</code></pre>\n</blockquote>\n\n<p>Sample usage:</p>\n\n<pre><code>#div {\n background: rgb(54, 25, 25); /* Fall-back for browsers that don't\n support rgba */\n background: rgba(54, 25, 25, .5);\n}\n</code></pre>\n\n<p><a href=\"http://jsfiddle.net/swQx2/\" rel=\"noreferrer\">Demo</a></p>\n\n<p>Check <a href=\"http://caniuse.com/#search=rgba\" rel=\"noreferrer\">http://caniuse.com/#search=rgba</a> to see support from browsers </p>\n", | |
| "source": "so", | |
| "questionId": 5135019 | |
| }, | |
| { | |
| "title": "How to style a checkbox using CSS?", | |
| "body": "<p>UPDATE:\nThe below answer references the state of things before widespread availability of CSS3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using javascript.</p>\n\n<p>Here are some useful links:</p>\n\n<ul>\n<li><a href=\"http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/\" rel=\"noreferrer\">Creating Custom Form Checkboxes with Just CSS</a></li>\n<li><a href=\"http://csscheckbox.com\" rel=\"noreferrer\">Easy CSS Checkbox Generator</a></li>\n<li><a href=\"http://css-tricks.com/the-checkbox-hack/\" rel=\"noreferrer\">Stuff You Can Do With The Checkbox Hack</a></li>\n<li><a href=\"http://www.css3.com/implementing-custom-checkboxes-and-radio-buttons-with-css3/\" rel=\"noreferrer\">Implementing Custom Checkboxes and Radio Buttons with CSS3</a></li>\n<li><a href=\"http://www.paulund.co.uk/style-checkboxes-with-css\" rel=\"noreferrer\">How to Style a Checkbox With CSS</a></li>\n</ul>\n\n<p>It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported <code>:checked</code> selector, you can make your replacement correctly reflect the checked status of the box.</p>\n\n<hr>\n\n<p>OLDER ANSWER</p>\n\n<p>Here's <a href=\"http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/\" rel=\"noreferrer\">a useful article about styling checkboxes</a>. Basically what that writer found was that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.</p>\n\n<p>It's not hard to imagine a workaround where you would use javascript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without javascript would see the default checkbox.</p>\n\n<p>Edited to add: here's <a href=\"http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/\" rel=\"noreferrer\">a nice script that does this for you</a>; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.</p>\n", | |
| "source": "so", | |
| "questionId": 4148499 | |
| }, | |
| { | |
| "title": "Remove IE10's "clear field" X button on certain inputs?", | |
| "body": "<p>Style the <a href=\"http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx\"><code>::-ms-clear</code> pseudo-element</a> for the box:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.someinput::-ms-clear {\n display: none;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 14007655 | |
| }, | |
| { | |
| "title": "How to apply !important using .css()?", | |
| "body": "<p>I think I've found a real solution. I've made it into a new function:</p>\n\n<p><code>jQuery.style(name, value, priority);</code></p>\n\n<p>You can use it to get values with <code>.style('name')</code> just like <code>.css('name')</code>, get the CSSStyleDeclaration with <code>.style()</code>, and also set values - with the ability to specify the priority as 'important'. See <a href=\"https://developer.mozilla.org/en/DOM/CSSStyleDeclaration\" rel=\"noreferrer\">this</a>.</p>\n\n<h2>Demo</h2>\n\n<pre><code>var div = $('someDiv');\nconsole.log(div.style('color'));\ndiv.style('color', 'red');\nconsole.log(div.style('color'));\ndiv.style('color', 'blue', 'important');\nconsole.log(div.style('color'));\nconsole.log(div.style().getPropertyPriority('color'));\n</code></pre>\n\n<p>Here's the output:</p>\n\n<pre><code>null\nred\nblue\nimportant\n</code></pre>\n\n<h2>The Function</h2>\n\n<pre><code>(function($) { \n if ($.fn.style) {\n return;\n }\n\n // Escape regex chars with \\\n var escape = function(text) {\n return text.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, \"\\\\$&\");\n };\n\n // For those who need them (< IE 9), add support for CSS functions\n var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;\n if (!isStyleFuncSupported) {\n CSSStyleDeclaration.prototype.getPropertyValue = function(a) {\n return this.getAttribute(a);\n };\n CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {\n this.setAttribute(styleName, value);\n var priority = typeof priority != 'undefined' ? priority : '';\n if (priority != '') {\n // Add priority manually\n var rule = new RegExp(escape(styleName) + '\\\\s*:\\\\s*' + escape(value) +\n '(\\\\s*;)?', 'gmi');\n this.cssText =\n this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');\n }\n };\n CSSStyleDeclaration.prototype.removeProperty = function(a) {\n return this.removeAttribute(a);\n };\n CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {\n var rule = new RegExp(escape(styleName) + '\\\\s*:\\\\s*[^\\\\s]*\\\\s*!important(\\\\s*;)?',\n 'gmi');\n return rule.test(this.cssText) ? 'important' : '';\n }\n }\n\n // The style function\n $.fn.style = function(styleName, value, priority) {\n // DOM node\n var node = this.get(0);\n // Ensure we have a DOM node\n if (typeof node == 'undefined') {\n return this;\n }\n // CSSStyleDeclaration\n var style = this.get(0).style;\n // Getter/Setter\n if (typeof styleName != 'undefined') {\n if (typeof value != 'undefined') {\n // Set style property\n priority = typeof priority != 'undefined' ? priority : '';\n style.setProperty(styleName, value, priority);\n return this;\n } else {\n // Get style property\n return style.getPropertyValue(styleName);\n }\n } else {\n // Get CSSStyleDeclaration\n return style;\n }\n };\n})(jQuery);\n</code></pre>\n\n<p>See <a href=\"https://developer.mozilla.org/en/DOM/CSSStyleDeclaration\" rel=\"noreferrer\">this</a> for examples of how to read and set the CSS values. My issue was that I had already set <code>!important</code> for the width in my CSS to avoid conflicts with other theme CSS, but any changes I made to the width in jQuery would be unaffected since they would be added to the style attribute.</p>\n\n<h2>Compatibility</h2>\n\n<p>For setting with the priority using the <code>setProperty</code> function, <a href=\"http://help.dottoro.com/ljdpsdnb.php\" rel=\"noreferrer\">This Article</a> says there is support for IE 9+ and all other browsers. I have tried with IE 8 and it has failed, which is why I built support for it in my functions (see above). It will work on all other browsers using setProperty, but it will need my custom code to work in < IE 9.</p>\n", | |
| "source": "so", | |
| "questionId": 2655925 | |
| }, | |
| { | |
| "title": "What does the "~" (tilde/squiggle/twiddle) CSS selector mean?", | |
| "body": "<p>The <code>~</code> selector is in fact the <a href=\"https://www.w3.org/TR/css3-selectors/#general-sibling-combinators\" rel=\"noreferrer\">General sibling combinator</a> (or Following-sibling combinator according to <a href=\"https://www.w3.org/TR/selectors/#adjacent-sibling-combinators\" rel=\"noreferrer\">selectors Level 4 working draft</a>):</p>\n\n<blockquote>\n <p>The general sibling combinator is made of the \"tilde\" (U+007E, ~)\n character that separates two sequences of simple selectors. The\n elements represented by the two sequences share the same parent in the\n document tree and the element represented by the first sequence\n precedes (not necessarily immediately) the element represented by the\n second one.</p>\n</blockquote>\n\n<p>Consider the following example:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>.a ~ .b {\r\n background-color: powderblue;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><ul>\r\n <li class=\"b\">1st</li>\r\n <li class=\"a\">2nd</li>\r\n <li>3rd</li>\r\n <li class=\"b\">4th</li>\r\n <li class=\"b\">5th</li>\r\n</ul></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><code>.a ~ .b</code> matches the 4th and 5th list item because they:</p>\n\n<ul>\n<li>Are <code>.b</code> elements </li>\n<li>Are siblings of <code>.a</code></li>\n<li>Appear after <code>.a</code> in HTML source order.</li>\n</ul>\n\n<p>Likewise, <code>.check:checked ~ .content</code> matches all <code>.content</code> elements that are siblings of <code>.check:checked</code> and appear after it.</p>\n", | |
| "source": "so", | |
| "questionId": 10782054 | |
| }, | |
| { | |
| "title": "What does the "+" (plus sign) CSS selector mean?", | |
| "body": "<p>This selector means that the style applies only to paragraphs directly following another paragraph.<br/>\nA plain <code>p</code> selector would apply the style to every paragraph in the page.</p>\n\n<p>See <a href=\"http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors\" rel=\"noreferrer\">adjacent selectors</a> on W3.org.</p>\n\n<hr>\n\n<p>This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the <code>></code> combinator, by the way.</p>\n\n<p>See also Microsoft's overview for <a href=\"http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#elementselectors\" rel=\"noreferrer\">CSS compatibility in Internet Explorer</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 1139763 | |
| }, | |
| { | |
| "title": "How can I position my div at the bottom of its container?", | |
| "body": "<p>Likely not.</p>\n\n<p>Assign <code>position:relative</code> to <code>#container</code>, and then <code>position:absolute; bottom:0;</code> to <code>#copyright</code>.</p>\n\n<hr>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#container {\r\n \r\n}\r\n#copyright {\r\n position: absolute;\r\n bottom: 0;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div id=\"container\">\r\n <!-- Other elements here -->\r\n <div id=\"copyright\">\r\n Copyright Foo web designs\r\n </div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 526035 | |
| }, | |
| { | |
| "title": "Bootstrap - Text-align class for inside table", | |
| "body": "<h1>Bootstrap 3</h1>\n\n<p><a href=\"http://getbootstrap.com/css/#type-alignment\" rel=\"noreferrer\">v3 Text Alignment Docs</a></p>\n\n<pre><code><p class=\"text-left\">Left aligned text.</p>\n<p class=\"text-center\">Center aligned text.</p>\n<p class=\"text-right\">Right aligned text.</p>\n<p class=\"text-justify\">Justified text.</p>\n<p class=\"text-nowrap\">No wrap text.</p>\n</code></pre>\n\n<p><a href=\"https://i.stack.imgur.com/DZHMg.png\" rel=\"noreferrer\"><img src=\"https://i.stack.imgur.com/DZHMg.png\" alt=\"Bootstrap 3 text align example\"></a></p>\n\n<h1>Bootstrap 4</h1>\n\n<p><a href=\"http://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment\" rel=\"noreferrer\">v4 Text Alignment Docs</a></p>\n\n<pre><code><p class=\"text-xs-left\">Left aligned text on all viewport sizes.</p>\n<p class=\"text-xs-center\">Center aligned text on all viewport sizes.</p>\n<p class=\"text-xs-right\">Right aligned text on all viewport sizes.</p>\n\n<p class=\"text-sm-left\">Left aligned text on viewports sized SM (small) or wider.</p>\n<p class=\"text-md-left\">Left aligned text on viewports sized MD (medium) or wider.</p>\n<p class=\"text-lg-left\">Left aligned text on viewports sized LG (large) or wider.</p>\n<p class=\"text-xl-left\">Left aligned text on viewports sized XL (extra-large) or wider.</p>\n</code></pre>\n\n<p><a href=\"https://i.stack.imgur.com/Qfi1K.png\" rel=\"noreferrer\"><img src=\"https://i.stack.imgur.com/Qfi1K.png\" alt=\"Bootstrap 4 text align example\"></a></p>\n", | |
| "source": "so", | |
| "questionId": 12829608 | |
| }, | |
| { | |
| "title": "Remove border from IFrame", | |
| "body": "<p>Add the <code>frameBorder</code> attribute (note the <strong>capital ‘B’</strong>).</p>\n\n<p>So it would look like:</p>\n\n<pre><code><iframe src=\"myURL\" width=\"300\" height=\"300\" frameBorder=\"0\">Browser not compatible.</iframe>\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 65034 | |
| }, | |
| { | |
| "title": "What is sr-only in Bootstrap 3?", | |
| "body": "<p>According to <a href=\"http://getbootstrap.com/css/#helper-classes-screen-readers\">bootstrap's documentation</a>, the class is used to hide information intended only for <strong>screen readers</strong> from the layout of the rendered page.</p>\n\n<blockquote>\n <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.</p>\n</blockquote>\n\n<p>Here is an <a href=\"http://jsfiddle.net/s9LFQ/\">example</a> styling used:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0,0,0,0);\n border: 0;\n}\n</code></pre>\n\n<blockquote>\n <p>Is it important or can I remove it? Works fine without.</p>\n</blockquote>\n\n<p>It's important, don't remove it.</p>\n\n<p>You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.</p>\n\n<p>If you're interested in reading about accessibility:</p>\n\n<ul>\n<li><p><a href=\"http://www.w3.org/WAI/\">Web Accessibility Initiative (WAI)</a></p></li>\n<li><p><a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility?redirectlocale=en-US&redirectslug=Accessibility\">MDN Accessibility documentation</a></p></li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 19758598 | |
| }, | |
| { | |
| "title": "Stretch and scale CSS background", | |
| "body": "<p>For modern browsers, you can accomplish this by using <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" rel=\"noreferrer\"><code>background-size</code></a>:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>body {\n background-image: url(bg.jpg);\n background-size: cover;\n}\n</code></pre>\n\n<p><code>cover</code> means stretching the image either vertically or horizontally so it never tiles/repeats.</p>\n\n<p>That would work for Safari 3 (or later), Chrome, <a href=\"http://en.wikipedia.org/wiki/Opera_%28web_browser%29\" rel=\"noreferrer\">Opera</a> 10+, Firefox 3.6+, and Internet Explorer 9 (or later).</p>\n\n<p>For it to work with lower verions of Internet Explorer, try these CSS:</p>\n\n<pre><code>filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');\n-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')\";\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 376253 | |
| }, | |
| { | |
| "title": "Change navbar color in Twitter Bootstrap", | |
| "body": "<blockquote>\n <p><strong>tl;dr - <a href=\"http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0\" rel=\"noreferrer\">TWBSColor - Generate your own Bootstrap navbar</a></strong></p>\n \n <p><strong>Version notes:</strong>\n - Online tool: Bootstrap 3.3.2+ / 4.0.0+\n - This answer: Bootstrap 3.0.x</p>\n</blockquote>\n\n<h2>Available navbars</h2>\n\n<p>You've got two basic navbars:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><!-- A light one -->\n<nav class=\"navbar navbar-default\" role=\"navigation\"></nav>\n<!-- A dark one -->\n<nav class=\"navbar navbar-inverse\" role=\"navigation\"></nav>\n</code></pre>\n\n<h2>Default color usage</h2>\n\n<p>Here are the main colors and their usage:</p>\n\n<ul>\n<li><code>#F8F8F8</code>: navbar background</li>\n<li><code>#E7E7E7</code>: navbar border</li>\n<li><code>#777</code>: default color</li>\n<li><code>#333</code>: hover color (<code>#5E5E5E</code> for <code>.nav-brand</code>)</li>\n<li><code>#555</code>: active color</li>\n<li><code>#D5D5D5</code>: active background</li>\n</ul>\n\n<h2>Default style</h2>\n\n<p>If you want to put some custom style, here's the CSS you need to change:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>/* navbar */\n.navbar-default {\n background-color: #F8F8F8;\n border-color: #E7E7E7;\n}\n/* Title */\n.navbar-default .navbar-brand {\n color: #777;\n}\n.navbar-default .navbar-brand:hover,\n.navbar-default .navbar-brand:focus {\n color: #5E5E5E;\n}\n/* Link */\n.navbar-default .navbar-nav > li > a {\n color: #777;\n}\n.navbar-default .navbar-nav > li > a:hover,\n.navbar-default .navbar-nav > li > a:focus {\n color: #333;\n}\n.navbar-default .navbar-nav > .active > a,\n.navbar-default .navbar-nav > .active > a:hover,\n.navbar-default .navbar-nav > .active > a:focus {\n color: #555;\n background-color: #E7E7E7;\n}\n.navbar-default .navbar-nav > .open > a,\n.navbar-default .navbar-nav > .open > a:hover,\n.navbar-default .navbar-nav > .open > a:focus {\n color: #555;\n background-color: #D5D5D5;\n}\n/* Caret */\n.navbar-default .navbar-nav > .dropdown > a .caret {\n border-top-color: #777;\n border-bottom-color: #777;\n}\n.navbar-default .navbar-nav > .dropdown > a:hover .caret,\n.navbar-default .navbar-nav > .dropdown > a:focus .caret {\n border-top-color: #333;\n border-bottom-color: #333;\n}\n.navbar-default .navbar-nav > .open > a .caret,\n.navbar-default .navbar-nav > .open > a:hover .caret,\n.navbar-default .navbar-nav > .open > a:focus .caret {\n border-top-color: #555;\n border-bottom-color: #555;\n}\n/* Mobile version */\n.navbar-default .navbar-toggle {\n border-color: #DDD;\n}\n.navbar-default .navbar-toggle:hover,\n.navbar-default .navbar-toggle:focus {\n background-color: #DDD;\n}\n.navbar-default .navbar-toggle .icon-bar {\n background-color: #CCC;\n}\n@media (max-width: 767px) {\n .navbar-default .navbar-nav .open .dropdown-menu > li > a {\n color: #777;\n }\n .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,\n .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {\n color: #333;\n }\n}\n</code></pre>\n\n<h2>Custom colored navbar examples</h2>\n\n<p>Here are four examples of a custom colored navbar:</p>\n\n<p><strong><a href=\"http://jsfiddle.net/zessx/drSbw/\" rel=\"noreferrer\">JSFiddle link</a></strong></p>\n\n<p><img src=\"https://i.stack.imgur.com/3qhkK.jpg\" alt=\"Enter image description here\"></p>\n\n<p>And the SCSS code:</p>\n\n<pre class=\"lang-css prettyprint-override\"><code>$bgDefault : #e74c3c;\n$bgHighlight : #c0392b;\n$colDefault : #ecf0f1;\n$colHighlight: #ffbbbc;\n.navbar-default {\n background-color: $bgDefault;\n border-color: $bgHighlight;\n .navbar-brand {\n color: $colDefault;\n &:hover, &:focus {\n color: $colHighlight; }}\n .navbar-text {\n color: $colDefault; }\n .navbar-nav {\n > li {\n > a {\n color: $colDefault;\n &:hover, &:focus {\n color: $colHighlight; }}}\n > .active {\n > a, > a:hover, > a:focus {\n color: $colHighlight;\n background-color: $bgHighlight; }}\n > .open {\n > a, > a:hover, > a:focus {\n color: $colHighlight;\n background-color: $bgHighlight; }}}\n .navbar-toggle {\n border-color: $bgHighlight;\n &:hover, &:focus {\n background-color: $bgHighlight; }\n .icon-bar {\n background-color: $colDefault; }}\n .navbar-collapse,\n .navbar-form {\n border-color: $colDefault; }\n .navbar-link {\n color: $colDefault;\n &:hover {\n color: $colHighlight; }}}\n@media (max-width: 767px) {\n .navbar-default .navbar-nav .open .dropdown-menu {\n > li > a {\n color: $colDefault;\n &:hover, &:focus {\n color: $colHighlight; }}\n > .active {\n > a, > a:hover, > a:focus, {\n color: $colHighlight;\n background-color: $bgHighlight; }}}\n}\n</code></pre>\n\n<h2>And finally, a little gift</h2>\n\n<p>I've just made a script which will allow you to generate your theme:\n<strong><a href=\"http://work.smarchal.com/twbscolor/css/e74c3cc0392becf0f1ffbbbc0\" rel=\"noreferrer\">TWBSColor - Generate your own Bootstrap navbar</a></strong></p>\n\n<p><em>[Update]: TWBSColor now generates SCSS/SASS/<a href=\"https://en.wikipedia.org/wiki/Less_%28stylesheet_language%29\" rel=\"noreferrer\">Less</a>/CSS code.</em> <br/>\n<em>[Update]: From now, you can use Less as the default language provided by TWBSColor</em> <br/>\n<em>[Update]: TWBSColor now supports drop down menus colorization</em><br>\n<em>[Update]: TWBSColor now allows to choose your version (Bootstrap 4 support added)</em></p>\n", | |
| "source": "so", | |
| "questionId": 18529274 | |
| }, | |
| { | |
| "title": "Can a CSS class inherit one or more other classes?", | |
| "body": "<p>There are tools like <a href=\"http://lesscss.org/\" rel=\"noreferrer\">LESS</a>, which allow you to compose CSS at a higher level of abstraction similar to what you describe.</p>\n\n<p>Less calls these \"Mixins\"</p>\n\n<p>Instead of</p>\n\n<pre><code>/* CSS */\n</code></pre>\n\n<pre class=\"lang-css prettyprint-override\"><code>#header {\n -moz-border-radius: 8px;\n -webkit-border-radius: 8px;\n border-radius: 8px;\n}\n\n#footer {\n -moz-border-radius: 8px;\n -webkit-border-radius: 8px;\n border-radius: 8px;\n}\n</code></pre>\n\n<p>You could say</p>\n\n<pre><code>/* LESS */\n</code></pre>\n\n<pre class=\"lang-css prettyprint-override\"><code>.rounded_corners {\n -moz-border-radius: 8px;\n -webkit-border-radius: 8px;\n border-radius: 8px;\n}\n\n#header {\n .rounded_corners;\n}\n\n#footer {\n .rounded_corners;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 1065435 | |
| }, | |
| { | |
| "title": "Make body have 100% of the browser height", | |
| "body": "<p>Try setting the height of the html element to 100% as well. </p>\n\n<pre><code>html, \nbody {\n height: 100%;\n}\n</code></pre>\n\n<p>Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well. </p>\n\n<p>However the content of body will probably need to change dynamically.\nSetting min-height to 100% will accomplish this goal.</p>\n\n<pre><code>html {\n height: 100%;\n}\nbody {\n min-height: 100%;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 6654958 | |
| }, | |
| { | |
| "title": "How do you easily horizontally center a <div> using CSS?", | |
| "body": "<p>In the case of a <strong>non-fixed width</strong> div (i.e. you don't know how much space the div will occupy).</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#wrapper {\r\n background-color: green; /* for visualization purposes */\r\n text-align: center;\r\n}\r\n#yourdiv {\r\n background-color: red; /* for visualization purposes */\r\n display: inline-block;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div id=\"wrapper\"> \r\n <div id=\"yourdiv\">Your text</div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Keep in mind that the width of <code>#yourdiv</code> is dynamic -> it will grow and shrink to accommodate the text inside it.</p>\n\n<p>You can check browser compatibility on <a href=\"http://caniuse.com/inline-block\" rel=\"nofollow noreferrer\">Caniuse</a></p>\n", | |
| "source": "so", | |
| "questionId": 618097 | |
| }, | |
| { | |
| "title": "Hide scroll bar, but while still being able to scroll", | |
| "body": "<p>Just a test which is working fine.</p>\n\n<pre><code>#parent{\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n#child{\n width: 100%;\n height: 100%;\n overflow-y: scroll;\n padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */\n box-sizing: content-box; /* So the width will be 100% + 17px */\n}\n</code></pre>\n\n<p><strong><a href=\"http://jsfiddle.net/5GCsJ/954/\" rel=\"noreferrer\">Working Fiddle</a></strong></p>\n\n<h3>JavaScript:</h3>\n\n<p>Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do <code>Element.offsetWidth - Element.clientWidth</code>, the exact scrollbar width will show up.</p>\n\n<p><strong><a href=\"http://jsfiddle.net/5GCsJ/4713/\" rel=\"noreferrer\">JavaScript Working Fiddle</a></strong></p>\n\n<h2>or</h2>\n\n<p>Using <code>Position: absolute</code>,</p>\n\n<pre><code>#parent{\n height: 100%;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n#child{\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: -17px; /* Increase/Decrease this value for cross-browser compatibility */\n overflow-y: scroll;\n}\n</code></pre>\n\n<p><strong><a href=\"http://jsfiddle.net/5GCsJ/2125/\" rel=\"noreferrer\">Working Fiddle</a></strong></p>\n\n<p><a href=\"http://jsfiddle.net/5GCsJ/4714/\" rel=\"noreferrer\"><strong>JavaScript Working Fiddle</strong></a></p>\n\n<h3>Info:</h3>\n\n<p>Based on this answer, I created a <a href=\"https://github.com/kamlekar/slim-scroll\" rel=\"noreferrer\">simple scroll plugin</a>. I hope this will help someone.</p>\n", | |
| "source": "so", | |
| "questionId": 16670931 | |
| }, | |
| { | |
| "title": "Hiding the scrollbar on an HTML page", | |
| "body": "<p>Set <code>overflow: hidden;</code> on the body tag like this:</p>\n\n<pre><code><style type=\"text/css\">\nbody {\n overflow:hidden;\n}\n</style>\n</code></pre>\n\n<p>The code above hides both horizontal and vertical scrollbar.</p>\n\n<p>If you want to hide <strong>only the vertical scrollbar</strong>, use <code>overflow-y</code>:</p>\n\n<pre><code><style type=\"text/css\">\nbody {\n overflow-y:hidden;\n}\n</style>\n</code></pre>\n\n<p>And if you want to hide <strong>only the horizontal scrollbar</strong>, use <code>overflow-x</code>:</p>\n\n<pre><code><style type=\"text/css\">\nbody {\n overflow-x:hidden;\n}\n</style>\n</code></pre>\n\n<p>update: I meant hidden, sorry, just woke up :-)</p>\n\n<hr>\n\n<p><em>Note: It'll also disable the scrolling feature. Refer below answers if you just want to hide scrollbar but not scroll feature.</em></p>\n", | |
| "source": "so", | |
| "questionId": 3296644 | |
| }, | |
| { | |
| "title": "Convert an image to grayscale in HTML/CSS", | |
| "body": "<p><a href=\"http://updates.html5rocks.com/2011/12/CSS-Filter-Effects-Landing-in-WebKit\" rel=\"noreferrer\">Support for CSS filters has landed in Webkit.</a> So we now have a cross-browser solution.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>img {\r\n filter: gray; /* IE6-9 */\r\n -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */\r\n filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */\r\n}\r\n\r\n/* Disable grayscale on hover */\r\nimg:hover {\r\n -webkit-filter: grayscale(0);\r\n filter: none;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><img src=\"http://lorempixel.com/400/200/\"></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<p><strong>What about Internet Explorer 10?</strong></p>\n\n<p>You can use a polyfill like <a href=\"https://github.com/karlhorky/gray\" rel=\"noreferrer\">gray</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 609273 | |
| }, | |
| { | |
| "title": "Changing the color of an hr element", | |
| "body": "<p>I think you should use <code>border-color</code> instead of <code>color</code>, if your intention is to change the color of the line produced by <code><hr></code> tag.</p>\n\n<p>Although, it has been pointed in comments that, if you change the size of your line, border will still be as wide as you specified in styles, and line will be filled with the default color (which is not a desired effect most of the time). So it seems like in this case you would also need to specify <code>background-color</code> (as @Ibu suggested in his answer).</p>\n\n<p><strong>HTML 5 Boilerplate</strong> project in its default stylesheet <a href=\"https://github.com/paulirish/html5-boilerplate/blob/ef3c095bafa9a6fa9c771f368d4b30c8ce4deded/css/style.css#L75\">specifies</a> the following rule:</p>\n\n<pre><code>hr {\n display: block;\n height: 1px;\n border: 0;\n border-top: 1px solid #ccc;\n margin: 1em 0;\n padding: 0; \n}\n</code></pre>\n\n<p><strong>An article</strong> titled <a href=\"http://www.sitepoint.com/12-little-known-css-facts/\">“12 Little-Known CSS Facts”</a>, published recently by SitePoint, mentions that <code><hr></code> can set its <code>border-color</code> to its parent's <code>color</code> if you specify <code>hr { border-color: inherit }</code>.</p>\n", | |
| "source": "so", | |
| "questionId": 6382023 | |
| }, | |
| { | |
| "title": "Resize image proportionally with CSS?", | |
| "body": "<p>To resize the image proportionally using CSS:</p>\n\n<pre><code>img.resize {\n width:540px; /* you can use % */\n height: auto;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 787839 | |
| }, | |
| { | |
| "title": "Vertical alignment of elements in a div", | |
| "body": "<p>Wow, this problem is popular. It's based on a misunderstanding in the <code>vertical-align</code> property. This excellent article explains it:</p>\n\n<p><a href=\"http://phrogz.net/CSS/vertical-align/index.html\" rel=\"noreferrer\">Understanding <code>vertical-align</code>, or \"How (Not) To Vertically Center Content\"</a> by Gavin Kistner.</p>\n\n<p><strong><a href=\"http://howtocenterincss.com/\" rel=\"noreferrer\">“How to center in CSS”</a></strong> is a great web tool which helps to find the necessary CSS centering attributes for different situations.</p>\n\n<hr>\n\n<p>In a nutshell <sub><sup>(and to prevent link rot)</sup></sub>:</p>\n\n<ul>\n<li><strong>Inline elements</strong> (and <em>only</em> inline elements) can be vertically aligned in their context via <code>vertical-align: middle</code>. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. <a href=\"http://jsfiddle.net/jBthq/\" rel=\"noreferrer\">jsfiddle example</a></li>\n<li>For block elements, vertical alignment is harder and strongly depends on the specific situation:\n\n<ul>\n<li>If the inner element can have a <strong>fixed height</strong>, you can make its position <code>absolute</code> and specify its <code>height</code>, <code>margin-top</code> and <code>top</code> position. <a href=\"http://jsfiddle.net/YFncP/2/\" rel=\"noreferrer\">jsfiddle example</a></li>\n<li>If the centered element <strong>consists of a single line</strong> <em>and</em> <strong>its parent height is fixed</strong> you can simply set the container’s <code>line-height</code> to fill its height. This method is quite versatile in my experience. <a href=\"http://jsfiddle.net/d4zGF/\" rel=\"noreferrer\">jsfiddle example</a></li>\n<li>… there are more such special cases.</li>\n</ul></li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 79461 | |
| }, | |
| { | |
| "title": "Can the :not() pseudo-class have multiple arguments?", | |
| "body": "<p>Why :not just use two <code>:not</code>:</p>\n\n<pre><code>input:not([type=\"radio\"]):not([type=\"checkbox\"])\n</code></pre>\n\n<p><sub><em>Yes, it is intentional</em></sub></p>\n", | |
| "source": "so", | |
| "questionId": 5684160 | |
| }, | |
| { | |
| "title": "How can I use a not:first-child selector?", | |
| "body": "<p>One of the versions you posted <a href=\"http://jsfiddle.net/5TKjB/\">actually works</a> for all modern browsers (where <a href=\"http://www.w3.org/TR/css3-selectors/\">CSS selectors level 3</a> are <a href=\"http://caniuse.com/#feat=css-sel3\">supported</a>):</p>\n\n<pre><code>div ul:not(:first-child) {\n background-color: #900;\n}\n</code></pre>\n\n<p>If you need to support legacy browsers, or if you are hindered by the <code>:not</code> selector's <a href=\"http://www.w3.org/TR/css3-selectors/#negation\">limitation</a> (it only accepts a <a href=\"http://www.w3.org/TR/css3-selectors/#simple-selectors-dfn\">simple selector</a> as an argument) then you can use another technique:</p>\n\n<p>Define a rule that has greater scope than what you intend and then \"revoke\" it conditionally, limiting its scope to what you do intend:</p>\n\n<pre><code>div ul {\n background-color: #900; /* applies to every ul */\n}\n\ndiv ul:first-child {\n background-color: transparent; /* limits the scope of the previous rule */\n}\n</code></pre>\n\n<p>When limiting the scope use the <a href=\"http://www.w3.org/TR/CSS2/colors.html#background-properties\">default value</a> for each CSS attribute that you are setting.</p>\n", | |
| "source": "so", | |
| "questionId": 12289853 | |
| }, | |
| { | |
| "title": "How do I wrap text in a pre tag?", | |
| "body": "<p>The answer, from <a href=\"https://longren.io/wrapping-text-inside-pre-tags/\" rel=\"noreferrer\">this page</a> in CSS:</p>\n\n<pre><code>pre {\n white-space: pre-wrap; /* Since CSS 2.1 */\n white-space: -moz-pre-wrap; /* Mozilla, since 1999 */\n white-space: -pre-wrap; /* Opera 4-6 */\n white-space: -o-pre-wrap; /* Opera 7 */\n word-wrap: break-word; /* Internet Explorer 5.5+ */\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 248011 | |
| }, | |
| { | |
| "title": "CSS center text (horizontally and vertically) inside a div block", | |
| "body": "<p>If it is one line of text and/or image, then it is easy to do. Just use</p>\n\n<pre><code>text-align: center;\nvertical-align: middle;\nline-height: 90px; /* the same as your div height */\n</code></pre>\n\n<p>that's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on <a href=\"http://pmob.co.uk/\">http://pmob.co.uk/</a> Look for \"vertical align\". </p>\n\n<p>Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.</p>\n\n<hr>\n\n<h1>Update for 2016 / 2017:</h1>\n\n<p>It can be more commonly done with <code>transform</code>, and it works well even in older browsers such as IE10 and IE11. It can support multiple lines of text:</p>\n\n<pre><code>position: relative;\ntop: 50%;\ntransform: translateY(-50%); \n</code></pre>\n\n<p>example: <a href=\"https://jsfiddle.net/wb8u02kL/1/\">https://jsfiddle.net/wb8u02kL/1/</a></p>\n\n<h2>To shrink wrap the width:</h2>\n\n<p>The solution above used a fixed width for the content area. To use a shrink wrap width, use</p>\n\n<pre><code>position: relative;\nfloat: left;\ntop: 50%;\nleft: 50%;\ntransform: translate(-50%, -50%);\n</code></pre>\n\n<p>example: <a href=\"https://jsfiddle.net/wb8u02kL/2/\">https://jsfiddle.net/wb8u02kL/2/</a></p>\n\n<p>I tried flexbox, but it wasn't as widely supported, as it would break in some older version of IE such as IE10.</p>\n", | |
| "source": "so", | |
| "questionId": 5703552 | |
| }, | |
| { | |
| "title": "Can we have multiple <tbody> in same <table>?", | |
| "body": "<p>Yes you can use them, for example I use them to more easily style groups of data, like this:</p>\n\n<pre><code><table>\n <thead>\n <tr><th>Customer</th><th>Order</th><th>Month</th></tr>\n </thead>\n <tbody>\n <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>\n <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>\n <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>\n </tbody>\n <tbody>\n <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>\n <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>\n <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>\n </tbody>\n <tbody>\n <tr><td>Customer 3</td><td>#1</td><td>January</td></tr>\n <tr><td>Customer 3</td><td>#2</td><td>April</td></tr>\n <tr><td>Customer 3</td><td>#3</td><td>March</td></tr>\n </tbody>\n</table>\n</code></pre>\n\n<p>Then you can style them easily, like this:</p>\n\n<pre><code>tbody:nth-child(odd) { background: #f5f5f5; }\ntbody:nth-child(even) { background: #e5e5e5; }\n</code></pre>\n\n<p><a href=\"http://jsfiddle.net/umRJr/\" rel=\"noreferrer\">You can view an example here</a>, it'll only work in newer browsers...but that's what I'm supporting in my current application, you can use the grouping for JavaScript etc. The main thing is it's a convenient way to visually group the rows to make the data much more readable. There are other uses of course, but as far as applicable examples, this one is the most common one for me.</p>\n", | |
| "source": "so", | |
| "questionId": 3076708 | |
| }, | |
| { | |
| "title": "Is it possible to vertically align text within a div?", | |
| "body": "<p>Create a container for your text content, a <code>span</code> perhaps.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#column-content {\r\n display: inline-block;\r\n}\r\nimg {\r\n vertical-align: middle;\r\n}\r\nspan {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n\r\n/* for visual purposes */\r\n#column-content {\r\n border: 1px solid red;\r\n position: relative;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div id=\"column-content\">\r\n\r\n <img src=\"http://i.imgur.com/WxW4B.png\">\r\n <span><strong>1234</strong>\r\n yet another text content that should be centered vertically</span>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p><a href=\"http://jsfiddle.net/9Y7Cm/5/\">JSFiddle</a></p>\n", | |
| "source": "so", | |
| "questionId": 9249359 | |
| }, | |
| { | |
| "title": "wildcard * in CSS for classes", | |
| "body": "<p>What you need is called attribute selector. An example, using your html structure, is the following: </p>\n\n<pre><code>div[class^=\"tocolor-\"], div[class*=\" tocolor-\"] {\n color:red \n}\n</code></pre>\n\n<p>In the place of <code>div</code> you can add any element or remove it altogether, and in the place of <code>class</code> you can add any attribute of the specified element.</p>\n\n<p><code>[class^=\"tocolor-\"]</code> — starts with \"tocolor-\".<br>\n<code>[class*=\" tocolor-\"]</code> — contains the substring \"tocolor-\" occurring directly after a space character.</p>\n\n<p><strong>Demo:</strong> <a href=\"http://jsfiddle.net/K3693/1/\" rel=\"noreferrer\">http://jsfiddle.net/K3693/1/</a></p>\n\n<p>More information on CSS attribute selectors, you can find <a href=\"http://reference.sitepoint.com/css/attributeselector\" rel=\"noreferrer\">here</a> and <a href=\"http://reference.sitepoint.com/css/css3attributeselectors\" rel=\"noreferrer\">here</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 5110249 | |
| }, | |
| { | |
| "title": "Can I use a :before or :after pseudo-element on an input field?", | |
| "body": "<p><code>:after</code> and <code>:before</code> are not supported in Internet Explorer 7 and under, on any elements.</p>\n\n<p>It's also not meant to be used on replaced elements such as <strong>form elements</strong> (inputs) and <strong>image elements</strong>.</p>\n\n<p>In other words it's <strong>impossible</strong> with pure CSS.</p>\n\n<p>However if using <a href=\"http://jquery.com\" rel=\"noreferrer\">jquery</a> you can use</p>\n\n<pre><code>$(\".mystyle\").after(\"add your smiley here\");\n</code></pre>\n\n<p><a href=\"http://api.jquery.com/after/\" rel=\"noreferrer\">API docs on .after</a></p>\n\n<p>To append your content with javascript. This will work across all browsers.</p>\n", | |
| "source": "so", | |
| "questionId": 2587669 | |
| }, | |
| { | |
| "title": "Targeting only Firefox with CSS", | |
| "body": "<p>OK, I've found it. This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>@-moz-document url-prefix() {\r\n h1 {\r\n color: red;\r\n }\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><h1>This should be red in FF</h1></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions\" rel=\"noreferrer\">Mozilla CSS Extensions</a>.</p>\n", | |
| "source": "so", | |
| "questionId": 952861 | |
| }, | |
| { | |
| "title": "How do you get centered content using Twitter Bootstrap?", | |
| "body": "<h2>This is for Text Centering (<em>which is what the question was about</em>)</h2>\n\n<p>For other types of content, see <a href=\"https://stackoverflow.com/a/13099189/2812842\">Flavien's answer</a>.</p>\n\n<p><strong>Update: Bootstrap 2.3.0+ Answer</strong></p>\n\n<p>The original answer was for an early version of bootstrap. As of bootstrap 2.3.0, <strong>you can simply give the div the class <code>.text-center</code></strong>.</p>\n\n<hr>\n\n<p><strong>Original Answer (pre 2.3.0)</strong></p>\n\n<p>You need to define one of the two classes, <code>row</code> or <code>span12</code> with a <code>text-align: center</code>. See <a href=\"http://jsfiddle.net/xKSUH/\" rel=\"noreferrer\">http://jsfiddle.net/xKSUH/</a> or <a href=\"http://jsfiddle.net/xKSUH/1/\" rel=\"noreferrer\">http://jsfiddle.net/xKSUH/1/</a></p>\n", | |
| "source": "so", | |
| "questionId": 9184141 | |
| }, | |
| { | |
| "title": "CSS Background Opacity", | |
| "body": "<p>Children inherit opacity. It'd be weird and inconvenient if they didn't. </p>\n\n<p>You can use a translucent png for your background image, or use an RGBa (a for alpha) color for your background color.</p>\n\n<p>Example, 50% faded black background:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div style=\"background-color:rgba(0, 0, 0, 0.5);\">\r\n <div>\r\n Text added.\r\n </div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 10422949 | |
| }, | |
| { | |
| "title": "What is the difference between display: inline and display: inline-block?", | |
| "body": "<h1>A visual answer</h1>\n\n<p>Imagine a <code><span></code> element inside a <code><div></code>. If you give the <code><span></code> element a height of 100px and a red border for example, it will look like this with</p>\n\n<p><strong>display: inline</strong></p>\n\n<p><img src=\"https://i.stack.imgur.com/Emf0B.png\" alt=\"display: inline\"></p>\n\n<p><strong>display: inline-block</strong></p>\n\n<p><img src=\"https://i.stack.imgur.com/1vbks.png\" alt=\"display: inline-block\"></p>\n\n<p><strong>display: block</strong></p>\n\n<p><img src=\"https://i.stack.imgur.com/IPf9Q.png\" alt=\"enter image description here\"></p>\n\n<p>Code: <a href=\"http://jsfiddle.net/Mta2b/\" rel=\"noreferrer\">http://jsfiddle.net/Mta2b/</a></p>\n\n<p>Elements with <code>display:inline-block</code> are like <code>display:inline</code> elements, but they can have a <strong>width</strong> and a <strong>height</strong>. That means that you can use an inline-block element as a block while flowing it within text or other elements.</p>\n\n<p>Difference of supported styles as summary:</p>\n\n<ul>\n<li><strong>inline</strong>: only <code>margin-left</code>, <code>margin-right</code>, <code>padding-left</code>, <code>padding-right</code></li>\n<li><strong>inline-block</strong>: <code>margin</code>, <code>padding</code>, <code>height</code>, <code>width</code></li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 8969381 | |
| }, | |
| { | |
| "title": "Twitter Bootstrap Form File Element Upload Button", | |
| "body": "<p>Here's a solution for Bootstrap 3 and 4.</p>\n\n<p>To make a functional file input control that looks like a button, you only need HTML:</p>\n\n<p><strong>HTML</strong></p>\n\n<pre><code><label class=\"btn btn-default\">\n Browse <input type=\"file\" hidden>\n</label>\n</code></pre>\n\n<p>This works in all modern browsers, including IE9+. If you need support for old IE as well, please use the legacy approach shown below.</p>\n\n<p>This techniques relies on the HTML5 <code>hidden</code> attribute. Bootstrap 4 uses the following CSS to shim this feature in unsupportive browsers. You may need to add if you're using Bootstrap 3.</p>\n\n<pre><code>[hidden] {\n display: none !important;\n}\n</code></pre>\n\n<hr>\n\n<h2>Legacy approach for old IE</h2>\n\n<p>If you need support for IE8 and below, use the following HTML/CSS:</p>\n\n<p><strong>HTML</strong></p>\n\n<pre><code><span class=\"btn btn-default btn-file\">\n Browse <input type=\"file\">\n</span>\n</code></pre>\n\n<p><strong>CSS</strong></p>\n\n<pre><code>.btn-file {\n position: relative;\n overflow: hidden;\n}\n.btn-file input[type=file] {\n position: absolute;\n top: 0;\n right: 0;\n min-width: 100%;\n min-height: 100%;\n font-size: 100px;\n text-align: right;\n filter: alpha(opacity=0);\n opacity: 0;\n outline: none;\n background: white;\n cursor: inherit;\n display: block;\n}\n</code></pre>\n\n<p>Note that old IE doesn't trigger the file input when you click on a <code><label></code>, so the The CSS \"bloat\" does a couple things to work around that:</p>\n\n<ul>\n<li>Makes the file input span the full width/height of the surrounding <code><span></code></li>\n<li>Makes the file input invisible</li>\n</ul>\n\n<hr>\n\n<h2>Feedback & Additional Reading</h2>\n\n<p>I've posted more details about this method, as well as examples for how to show the user which/how many files are selected:</p>\n\n<p><a href=\"http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/\" rel=\"noreferrer\">http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/</a></p>\n", | |
| "source": "so", | |
| "questionId": 11235206 | |
| }, | |
| { | |
| "title": "Removing multiple classes (jQuery)", | |
| "body": "<pre><code>$(\"element\").removeClass(\"class1 class2\");\n</code></pre>\n\n<p>From <a href=\"http://docs.jquery.com/Attributes/removeClass\" rel=\"noreferrer\"><code>removeClass()</code></a>, the class parameter:</p>\n\n<blockquote>\n <p>One or more CSS classes to remove from\n the elements, these are separated by\n spaces.</p>\n</blockquote>\n", | |
| "source": "so", | |
| "questionId": 1485647 | |
| }, | |
| { | |
| "title": "Fixed position but relative to container", | |
| "body": "<p>Short answer: <s>no.</s> (It is now possible with CSS transform. See the edit below)</p>\n\n<p>Long answer: The problem with using \"fixed\" positioning is that it takes the element <strong>out of flow</strong>. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:</p>\n\n<pre><code>#fixedContainer {\n position: fixed;\n width: 600px;\n height: 200px;\n left: 50%;\n top: 0%;\n margin-left: -300px; /*half the width*/\n}\n</code></pre>\n\n<p><a href=\"http://jsfiddle.net/HFjU6/1/\" rel=\"noreferrer\">http://jsfiddle.net/HFjU6/1/</a></p>\n\n<h3>Edit (03/2015):</h3>\n\n<p>This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use <code>translateX(-50%)</code>. This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like <code>50%</code>) because it will be relative to the parent and not the element it's applied to. <code>transform</code> behaves differently. Its values are relative to the element they are applied to. Thus, <code>50%</code> for <code>transform</code> means half the width of the element, while <code>50%</code> for margin is half of the parent's width. This is an <a href=\"http://caniuse.com/#feat=transforms2d\" rel=\"noreferrer\">IE9+ solution</a></p>\n\n<p>Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:</p>\n\n<pre><code>.fixedContainer {\n background-color:#ddd;\n position: fixed;\n padding: 2em;\n left: 50%;\n top: 0%;\n transform: translateX(-50%);\n}\n</code></pre>\n\n<p>If you want it to be centered, you can do that too:</p>\n\n<pre><code>.fixedContainer {\n background-color:#ddd;\n position: fixed;\n padding: 2em;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n</code></pre>\n\n<h3>Demos:</h3>\n\n<p><a href=\"http://jsfiddle.net/b2jz1yvr/\" rel=\"noreferrer\">jsFiddle: Centered horizontally only</a><br/>\n<a href=\"http://jsfiddle.net/b2jz1yvr/1/\" rel=\"noreferrer\">jsFiddle: Centered both horizontally and vertically</a>\n<br/>Original credit goes to user <a href=\"https://stackoverflow.com/users/1387396/aaronk6\">aaronk6</a> for pointing it out to me in <a href=\"https://stackoverflow.com/a/28773941/854246\">this answer</a></p>\n", | |
| "source": "so", | |
| "questionId": 6794000 | |
| }, | |
| { | |
| "title": "Why do browsers match CSS selectors from right to left?", | |
| "body": "<p>Keep in mind that when a browser is doing selector matching it has one element (the one it's trying to determine style for) and all your rules and their selectors and it needs to find which rules match the element. This is different from the usual jQuery thing, say, where you only have one selector and you need to find all the elements that match that selector.</p>\n\n<p>If you only had one selector and only one element to compare against that selector, then left-to-right makes more sense in some cases. But that's decidedly <em>not</em> the browser's situation. The browser is trying to render Gmail or whatever and has the one <code><span></code> it's trying to style and the 10,000+ rules Gmail puts in its stylesheet (I'm not making that number up).</p>\n\n<p>In particular, in the situation the browser is looking at most of the selectors it's considering <em>don't</em> match the element in question. So the problem becomes one of deciding that a selector doesn't match as fast as possible; if that requires a bit of extra work in the cases that do match you still win due to all the work you save in the cases that don't match.</p>\n\n<p>If you start by just matching the rightmost part of the selector against your element, then chances are it won't match and you're done. If it does match, you have to do more work, but only proportional to your tree depth, which is not that big in most cases.</p>\n\n<p>On the other hand, if you start by matching the leftmost part of the selector... what do you match it against? You have to start walking the DOM, looking for nodes that might match it. Just discovering that there's nothing matching that leftmost part might take a while.</p>\n\n<p>So browsers match from the right; it gives an obvious starting point and lets you get rid of most of the candidate selectors very quickly. You can see some data at <a href=\"http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665\">http://groups.google.com/group/mozilla.dev.tech.layout/browse_thread/thread/b185e455a0b3562a/7db34de545c17665</a> (though the notation is confusing), but the upshot is that for Gmail in particular two years ago, for 70% of the (rule, element) pairs you could decide that the rule does not match after just examining the tag/class/id parts of the rightmost selector for the rule. The corresponding number for Mozilla's pageload performance test suite was 72%. So it's really worth trying to get rid of those 2/3 of all rules as fast as you can and then only worry about matching the remaining 1/3.</p>\n\n<p>Note also that there are other optimizations browsers already do to avoid even trying to match rules that definitely won't match. For example, if the rightmost selector has an id and that id doesn't match the element's id, then there will be no attempt to match that selector against that element at all in Gecko: the set of \"selectors with IDs\" that are attempted comes from a hashtable lookup on the element's ID. So this is 70% of the rules which have a pretty good chance of matching that <em>still</em> don't match after considering just the tag/class/id of the rightmost selector.</p>\n", | |
| "source": "so", | |
| "questionId": 5797014 | |
| }, | |
| { | |
| "title": "Make a div into a link", | |
| "body": "<p>Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.</p>\n\n<p>For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.</p>\n\n<p>In essence it's this:</p>\n\n<ul>\n<li>Build your panel using normal CSS techniques and valid HTML. </li>\n<li>Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too). </li>\n<li>Inside that link, put an empty span tag (<code><span></span></code>, not <code><span /></code> - thanks @Campey)</li>\n<li>give the panel position:relative </li>\n<li><p>apply the following CSS to the empty span:</p>\n\n<pre><code>{ \n position:absolute; \n width:100%;\n height:100%;\n top:0;\n left: 0;\n\n z-index: 1;\n\n /* fixes overlap error in IE7/8, \n make sure you have an empty gif */\n background-image: url('empty.gif');\n} \n</code></pre>\n\n<p>It will now cover the panel, and as it's inside an <code><A></code> tag, it's a clickable link</p></li>\n<li>give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link</li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 796087 | |
| }, | |
| { | |
| "title": "What is the difference between Normalize.css and Reset CSS?", | |
| "body": "<p>I work on normalize.css.</p>\n\n<p>The main differences are:</p>\n\n<ol>\n<li><p><strong>Normalize.css preserves useful defaults rather than \"unstyling\" everything.</strong> For example, elements like <code>sup</code> or <code>sub</code> \"just work\" after including normalize.css (and are actually made more robust) whereas they are visually indistinguishable from normal text after including reset.css. So, normalize.css does not impose a visual starting point (homogeny) upon you. This may not be to everyone's taste. The best thing to do is experiment with both and see which gels with your preferences.</p></li>\n<li><p><strong>Normalize.css corrects some common bugs that are out of scope for reset.css.</strong> It has a wider scope than reset.css, and also provides bug fixes for common problems like: display settings for HTML5 elements, the lack of <code>font</code> inheritance by form elements, correcting <code>font-size</code> rendering for <code>pre</code>, SVG overflow in IE9, and the <code>button</code> styling bug in iOS.</p></li>\n<li><p><strong>Normalize.css doesn't clutter your dev tools.</strong> A common irritation when using reset.css is the large inheritance chain that is displayed in browser CSS debugging tools. This is not such an issue with normalize.css because of the targeted stylings.</p></li>\n<li><p><strong>Normalize.css is more modular.</strong> The project is broken down into relatively independent sections, making it easy for you to potentially remove sections (like the form normalizations) if you know they will never be needed by your website.</p></li>\n<li><p><strong>Normalize.css has better documentation.</strong> The normalize.css code is documented inline as well as more comprehensively in the <a href=\"https://github.com/necolas/normalize.css/wiki\">GitHub Wiki</a>. This means you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests. The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.</p></li>\n</ol>\n\n<p>I've written in greater detail about this in an article <a href=\"http://nicolasgallagher.com/about-normalize-css/\">about normalize.css</a></p>\n", | |
| "source": "so", | |
| "questionId": 6887336 | |
| }, | |
| { | |
| "title": "Word-wrap in an HTML table", | |
| "body": "<p>The following works for me in Internet Explorer. Note the addition of the <code>table-layout:fixed</code> CSS attribute</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>td {\r\n border: 1px solid;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><table style=\"table-layout: fixed; width: 100%\">\r\n <tr>\r\n <td style=\"word-wrap: break-word\">\r\n LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord\r\n </td>\r\n </tr>\r\n</table></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 1258416 | |
| }, | |
| { | |
| "title": "Styling an input type="file" button", | |
| "body": "<p>Styling file inputs is notoriously difficult, as most browsers will not change the appearance from either css or javascript.</p>\n\n<p>Even the size of the input will not respond to the likes of:</p>\n\n<pre><code><input type=\"file\" style=\"width:200px\">\n</code></pre>\n\n<p>Instead you will need to use the size attribute:</p>\n\n<pre><code><input type=\"file\" size=\"60\" />\n</code></pre>\n\n<p>For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at <a href=\"http://www.quirksmode.org/dom/inputfile.html\" rel=\"noreferrer\">www.quirksmode.org/dom/inputfile.html</a> is the best one I've seen.</p>\n", | |
| "source": "so", | |
| "questionId": 572768 | |
| }, | |
| { | |
| "title": "How to center a "position: absolute" element", | |
| "body": "<pre><code>position: absolute;\nmargin-left: auto;\nmargin-right: auto;\nleft: 0;\nright: 0;\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 8508275 | |
| }, | |
| { | |
| "title": "CSS '>' selector; what is it?", | |
| "body": "<h2><code>></code> selects immediate children</h2>\n\n<p>For example, if you have nested divs like such:</p>\n\n<pre><code><div class='outer'>\n <div class=\"middle\">\n <div class=\"inner\">...</div>\n </div>\n <div class=\"middle\">\n <div class=\"inner\">...</div>\n </div>\n</div>\n</code></pre>\n\n<p>and you declare a css rule in your stylesheet like such:</p>\n\n<pre><code>.outer > div {\n ...\n}\n</code></pre>\n\n<p>your rules will apply only to those divs that have a class of \"middle\" since those divs are direct descendants (immediate children) of elements with class \"outer\" (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>div {\r\n border: 1px solid black;\r\n padding: 10px;\r\n}\r\n.outer > div {\r\n border: 1px solid orange;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><div class='outer'>\r\n div.outer - This is the parent.\r\n <div class=\"middle\">\r\n div.middle - This is an immediate child of \"outer\". This will receive the orange border.\r\n <div class=\"inner\">div.inner - This is an immediate child of \"middle\". This will not receive the orange border.</div>\r\n </div>\r\n <div class=\"middle\">\r\n div.middle - This is an immediate child of \"outer\". This will receive the orange border.\r\n <div class=\"inner\">div.inner - This is an immediate child of \"middle\". This will not receive the orange border.</div>\r\n </div>\r\n</div>\r\n\r\n<p>Without Words</p>\r\n\r\n<div class='outer'>\r\n <div class=\"middle\">\r\n <div class=\"inner\">...</div>\r\n </div>\r\n <div class=\"middle\">\r\n <div class=\"inner\">...</div>\r\n </div>\r\n</div></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<h2>Side note</h2>\n\n<p>If you, instead, had a space <code></code> between selectors instead of <code>></code>, your rules would apply to both of the nested divs. The space is much more commonly used and defines a \"descendant selector\", which means it looks for any matching element down the tree rather than just immediate children as the <code>></code> does.</p>\n\n<p>NOTE: The <code>></code> selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.</p>\n\n<p>If you're looking into less-well-used CSS selectors, you may also want to look at <code>+</code>, <code>~</code>, and <code>[attr]</code> selectors, all of which can be very useful.</p>\n\n<p><a href=\"http://www.quirksmode.org/css/selectors/\">This page</a> has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.</p>\n", | |
| "source": "so", | |
| "questionId": 4459821 | |
| }, | |
| { | |
| "title": "What is Bootstrap?", | |
| "body": "<p>It is an HTML, CSS, javascript framework that you can use as a basis for creating web sites or web applications. </p>\n\n<ul>\n<li><p><a href=\"https://stackoverflow.com/tags/twitter-bootstrap/info\">More information and links to download</a></p></li>\n<li><p><a href=\"http://getbootstrap.com/getting-started/\" rel=\"noreferrer\">Getting started</a></p></li>\n<li><p><a href=\"http://bootsnipp.com/\" rel=\"noreferrer\">Examples</a></p></li>\n<li><p><a href=\"http://bootswatch.com/\" rel=\"noreferrer\">Themes</a></p></li>\n<li><p><a href=\"http://www.bootply.com/\" rel=\"noreferrer\">Bootply - Bootstrap Editor and Builder</a></p></li>\n</ul>\n\n<p><strong>Update</strong></p>\n\n<p><strong>The official <a href=\"http://getbootstrap.com/\" rel=\"noreferrer\">boostrap website</a></strong> is updated and includes a clear definition.</p>\n\n<p>\"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.\"</p>\n\n<p>\"Designed and built with all the love in the world by <a href=\"https://twitter.com/mdo\" rel=\"noreferrer\">@mdo</a> and <a href=\"https://twitter.com/fat\" rel=\"noreferrer\">@fat</a>.\"</p>\n", | |
| "source": "so", | |
| "questionId": 14546709 | |
| }, | |
| { | |
| "title": "Remove CSS class from element with JavaScript (no jQuery)", | |
| "body": "<p>The right and standard way to do it is using <code>classList</code>. It is now <a href=\"http://caniuse.com/#search=classList\" rel=\"noreferrer\">widely supported in the latest version of most modern browsers</a>:</p>\n\n<pre><code>ELEMENT.classList.remove(\"CLASS_NAME\");\n</code></pre>\n\n<p>Documentation: <a href=\"https://developer.mozilla.org/en/DOM/element.classList\" rel=\"noreferrer\">https://developer.mozilla.org/en/DOM/element.classList</a></p>\n", | |
| "source": "so", | |
| "questionId": 2155737 | |
| }, | |
| { | |
| "title": "Is embedding background image data into CSS as Base64 good or bad practice?", | |
| "body": "<p>It's not a good idea when you want your images and style information to be cached separately. Also if you encode a large image or a significant number of images in to your css file it will take the browser longer to download the file leaving your site without any of the style information until the download completes. For small images that you don't intend on changing often if ever it is a fine solution.</p>\n\n<p>as far as generating the base64 encoding:</p>\n\n<ul>\n<li><a href=\"http://b64.io/\" rel=\"noreferrer\">http://b64.io/</a></li>\n<li><a href=\"http://www.motobit.com/util/base64-decoder-encoder.asp\" rel=\"noreferrer\">http://www.motobit.com/util/base64-decoder-encoder.asp</a> (upload)</li>\n<li><a href=\"http://www.greywyvern.com/code/php/binary2base64\" rel=\"noreferrer\">http://www.greywyvern.com/code/php/binary2base64</a> (from link with little tutorials underneath)</li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 1124149 | |
| }, | |
| { | |
| "title": "How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags", | |
| "body": "<p>The most common way to do this is something along these lines:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>ul {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\nli {\r\n padding-left: 1em; \r\n text-indent: -.7em;\r\n}\r\n\r\nli::before {\r\n content: \"• \";\r\n color: red; /* or whatever color you prefer */\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><ul>\r\n <li>Foo</li>\r\n <li>Bar</li>\r\n <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>\r\n</ul></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>JSFiddle: <a href=\"http://jsfiddle.net/leaverou/ytH5P/\" rel=\"noreferrer\">http://jsfiddle.net/leaverou/ytH5P/</a></p>\n\n<p>Will work in all browsers, including IE from version 8 and up.</p>\n", | |
| "source": "so", | |
| "questionId": 5306640 | |
| }, | |
| { | |
| "title": "Remove blue border from css custom-styled button in Chrome", | |
| "body": "<p>Just add this to your css:</p>\n\n<pre><code>button:focus {outline:0;}\n</code></pre>\n\n<p>Check it out or JSFiddle: <a href=\"http://jsfiddle.net/u4pXu/\" rel=\"noreferrer\">http://jsfiddle.net/u4pXu/</a></p>\n\n<p>Or in this snippet:</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>button.launch {\r\nbackground-color: #F9A300;\r\nborder: none;\r\nheight: 40px;\r\npadding: 5px 15px;\r\ncolor: #ffffff;\r\nfont-size: 16px;\r\nfont-weight: 300;\r\nmargin-top: 10px;\r\nmargin-right: 10px;\r\n}\r\n\r\nbutton.launch:hover {\r\ncursor: pointer;\r\nbackground-color: #FABD44;\r\n}\r\n\r\nbutton.launch {\r\nbackground-color: #F9A300;\r\nborder: none;\r\nheight: 40px;\r\npadding: 5px 15px;\r\ncolor: #ffffff;\r\nfont-size: 16px;\r\nfont-weight: 300;\r\nmargin-top: 10px;\r\nmargin-right: 10px;\r\n}\r\n\r\nbutton.launch:hover {\r\ncursor: pointer;\r\nbackground-color: #FABD44;\r\n}\r\n\r\nbutton.change {\r\nbackground-color: #F88F00;\r\nborder: none;\r\nheight: 40px;\r\npadding: 5px 15px;\r\ncolor: #ffffff;\r\nfont-size: 16px;\r\nfont-weight: 300;\r\nmargin-top: 10px;\r\nmargin-right: 10px;\r\n}\r\n\r\nbutton.change:hover {\r\ncursor: pointer;\r\nbackground-color: #F89900;\r\n}\r\n\r\nbutton:active {\r\noutline: none;\r\nborder: none;\r\n}\r\n\r\nbutton:focus {outline:0;}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><button class=\"launch\">Launch with these ads</button> \r\n<button class=\"change\">Change</button></code></pre>\r\n</div>\r\n</div>\r\n</p>\n", | |
| "source": "so", | |
| "questionId": 20340138 | |
| }, | |
| { | |
| "title": "Expand a div to take the remaining width", | |
| "body": "<p>The solution to this is actually very easy, but not at <em>all</em> obvious. You have to trigger something called a \"block formatting context\" (BFC), which interacts with floats in a specific way.</p>\n\n<p>Just take that second div, remove the float, and give it <code>overflow:hidden</code> instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do it's thing, then the second div will be an ordinary block, taking up all available width <em>except that occupied by the float</em>.</p>\n\n<p>This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.</p>\n\n<p><strong>Demos:</strong></p>\n\n<ul>\n<li>Fixed Left: <a href=\"http://jsfiddle.net/A8zLY/5/\" rel=\"noreferrer\">http://jsfiddle.net/A8zLY/5/</a></li>\n<li>Fixed Right: <a href=\"http://jsfiddle.net/A8zLY/2/\" rel=\"noreferrer\">http://jsfiddle.net/A8zLY/2/</a></li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 1260122 | |
| }, | |
| { | |
| "title": "How to add a tooltip to a div", | |
| "body": "<p>For the basic tooltip, you want:</p>\n\n<pre><code><div title=\"This is my tooltip\">\n</code></pre>\n\n<p>For a fancier javascript version, you can look into:</p>\n\n<p><a href=\"http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632\" rel=\"noreferrer\">http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632</a></p>\n\n<p>The above link gives you 12 options for tooltips.</p>\n", | |
| "source": "so", | |
| "questionId": 7117073 | |
| }, | |
| { | |
| "title": "Bootstrap modal appearing under background", | |
| "body": "<p>If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.</p>\n\n<p><strong>Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.</strong></p>\n\n<p>Here are a couple ways to do this:</p>\n\n<ol>\n<li>Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag <code></body></code>.</li>\n<li>Alternatively, you can remove <code>position:</code> CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.</li>\n</ol>\n", | |
| "source": "so", | |
| "questionId": 10636667 | |
| }, | |
| { | |
| "title": "How to remove the border highlight on an input text element", | |
| "body": "<p>In your case, try:</p>\n\n<pre><code>input.middle:focus {\n outline-width: 0;\n}\n</code></pre>\n\n<p>Or in general, to affect all basic form elements:</p>\n\n<pre><code>input:focus,\nselect:focus,\ntextarea:focus,\nbutton:focus {\n outline: none;\n}\n</code></pre>\n\n<hr>\n\n<p>In the comments, <a href=\"https://stackoverflow.com/users/2316623\">Noah Whitmore</a> suggested taking this even further to support elements that have the <code>contenteditable</code> attribute set to <code>true</code> (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):</p>\n\n<pre><code>[contenteditable=\"true\"]:focus {\n outline: none;\n}\n</code></pre>\n\n<p>Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on <strong>everything</strong> with this:</p>\n\n<pre><code>*:focus {\n outline: none;\n}\n</code></pre>\n\n<p>Keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused.</p>\n", | |
| "source": "so", | |
| "questionId": 1457849 | |
| }, | |
| { | |
| "title": "How to add some non-standard font to a website?", | |
| "body": "<p>This could be done via CSS:</p>\n\n<pre><code><style type=\"text/css\">\n@font-face {\n font-family: \"My Custom Font\";\n src: url(http://www.example.org/mycustomfont.ttf) format(\"truetype\");\n}\np.customfont { \n font-family: \"My Custom Font\", Verdana, Tahoma;\n}\n</style>\n<p class=\"customfont\">Hello world!</p>\n</code></pre>\n\n<p>It is <a href=\"http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp\" rel=\"noreferrer\">supported for all of the regular browsers</a> if you use TrueType-Fonts (TTF) or the Web Open Font Format (WOFF).</p>\n", | |
| "source": "so", | |
| "questionId": 107936 | |
| }, | |
| { | |
| "title": "Center image using text-align center?", | |
| "body": "<p>That will not work as the <code>text-align</code> property applies to block containers, not inline elements, and <code>img</code> is an inline element. See <a href=\"http://www.w3.org/TR/CSS21/text.html#alignment-prop\" rel=\"noreferrer\">the W3C spec</a>.</p>\n\n<p>Use this instead:</p>\n\n<pre><code>img.center {\n display: block;\n margin: 0 auto;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 7055393 | |
| }, | |
| { | |
| "title": "Downloading jQuery UI CSS from Google's CDN", | |
| "body": "<p>The Google AJAX Libraries API, which includes jQuery UI (currently v1.10.3), also includes popular themes as per the <a href=\"http://blog.jqueryui.com/2013/05/jquery-ui-1-10-3/\" rel=\"noreferrer\">jQuery UI blog</a>:</p>\n\n<p><strong>Google Ajax Libraries API (CDN)</strong></p>\n\n<ul>\n<li><p>Uncompressed: <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js\" rel=\"noreferrer\"><a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js\" rel=\"noreferrer\">http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js</a></a></p></li>\n<li><p>Compressed: <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\" rel=\"noreferrer\"><a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\" rel=\"noreferrer\">http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js</a></a></p></li>\n<li><p>Themes Uncompressed:\n<a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.css\" rel=\"noreferrer\">black-tie</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/blitzer/jquery-ui.css\" rel=\"noreferrer\">blitzer</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.css\" rel=\"noreferrer\">cupertino</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css\" rel=\"noreferrer\">dark-hive</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dot-luv/jquery-ui.css\" rel=\"noreferrer\">dot-luv</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/eggplant/jquery-ui.css\" rel=\"noreferrer\">eggplant</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/excite-bike/jquery-ui.css\" rel=\"noreferrer\">excite-bike</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css\" rel=\"noreferrer\">flick</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/hot-sneaks/jquery-ui.css\" rel=\"noreferrer\">hot-sneaks</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/humanity/jquery-ui.css\" rel=\"noreferrer\">humanity</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/le-frog/jquery-ui.css\" rel=\"noreferrer\">le-frog</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/mint-choc/jquery-ui.css\" rel=\"noreferrer\">mint-choc</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/overcast/jquery-ui.css\" rel=\"noreferrer\">overcast</a>,<a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/pepper-grinder/jquery-ui.css\" rel=\"noreferrer\">pepper-grinder</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css\" rel=\"noreferrer\">redmond</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css\" rel=\"noreferrer\">smoothness</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css\" rel=\"noreferrer\">south-street</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css\" rel=\"noreferrer\">start</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.css\" rel=\"noreferrer\">sunny</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/swanky-purse/jquery-ui.css\" rel=\"noreferrer\">swanky-purse</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/trontastic/jquery-ui.css\" rel=\"noreferrer\">trontastic</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-darkness/jquery-ui.css\" rel=\"noreferrer\">ui-darkness</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css\" rel=\"noreferrer\">ui-lightness</a>, and <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/vader/jquery-ui.css\" rel=\"noreferrer\">vader</a>.</p></li>\n<li><p>Themes Compressed:\n<a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css\" rel=\"noreferrer\">black-tie</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/blitzer/jquery-ui.min.css\" rel=\"noreferrer\">blitzer</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/cupertino/jquery-ui.min.css\" rel=\"noreferrer\">cupertino</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.min.css\" rel=\"noreferrer\">dark-hive</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dot-luv/jquery-ui.min.css\" rel=\"noreferrer\">dot-luv</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/eggplant/jquery-ui.min.css\" rel=\"noreferrer\">eggplant</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/excite-bike/jquery-ui.min.css\" rel=\"noreferrer\">excite-bike</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.min.css\" rel=\"noreferrer\">flick</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/hot-sneaks/jquery-ui.min.css\" rel=\"noreferrer\">hot-sneaks</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/humanity/jquery-ui.min.css\" rel=\"noreferrer\">humanity</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/le-frog/jquery-ui.min.css\" rel=\"noreferrer\">le-frog</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/mint-choc/jquery-ui.min.css\" rel=\"noreferrer\">mint-choc</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/overcast/jquery-ui.min.css\" rel=\"noreferrer\">overcast</a>,<a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/pepper-grinder/jquery-ui.min.css\" rel=\"noreferrer\">pepper-grinder</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css\" rel=\"noreferrer\">redmond</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css\" rel=\"noreferrer\">smoothness</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.min.css\" rel=\"noreferrer\">south-street</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.min.css\" rel=\"noreferrer\">start</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css\" rel=\"noreferrer\">sunny</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/swanky-purse/jquery-ui.min.css\" rel=\"noreferrer\">swanky-purse</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/trontastic/jquery-ui.min.css\" rel=\"noreferrer\">trontastic</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-darkness/jquery-ui.min.css\" rel=\"noreferrer\">ui-darkness</a>, <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css\" rel=\"noreferrer\">ui-lightness</a>, and <a href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/vader/jquery-ui.min.css\" rel=\"noreferrer\">vader</a>.</p></li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 820412 | |
| }, | |
| { | |
| "title": "Using relative URL in CSS file, what location is it relative to?", | |
| "body": "<p>According to <a href=\"http://www.w3.org/TR/REC-CSS1/#url\" rel=\"noreferrer\">W3</a>:</p>\n\n<blockquote>\n <p>Partial URLs are interpreted relative to the source of the style sheet, not relative to the document</p>\n</blockquote>\n\n<p>Therefore, in answer to your question, it will be relative to <code>/stylesheets/</code>.</p>\n\n<p>If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardising it to the CSS file means that the URLs will work wherever the stylesheets are linked.</p>\n", | |
| "source": "so", | |
| "questionId": 940451 | |
| }, | |
| { | |
| "title": "CSS display: inline vs inline-block", | |
| "body": "<p>Inline elements:</p>\n\n<ol>\n<li>respect left & right margins and padding, but <strong>not</strong> top & bottom</li>\n<li><strong>cannot</strong> have a width and height set</li>\n<li>allow other elements to sit to their left and right.</li>\n<li>see very important side notes on this <a href=\"https://hacks.mozilla.org/2015/03/understanding-inline-box-model/\" rel=\"nofollow noreferrer\" title=\"mozzila docs\">here</a>.</li>\n</ol>\n\n<p>Block elements:</p>\n\n<ol>\n<li>respect all of those</li>\n<li>force a line break after the block element</li>\n<li>acquires full-width if width not defined</li>\n</ol>\n\n<p>Inline-block elements:</p>\n\n<ol>\n<li>allow other elements to sit to their left and right</li>\n<li>respect top & bottom margins and padding</li>\n<li>respect height and width</li>\n</ol>\n\n<p>From <a href=\"http://www.w3schools.com/cssref/pr_class_display.asp\" rel=\"nofollow noreferrer\">W3Schools</a>:</p>\n\n<blockquote>\n <ul>\n <li><p>An inline element has no line break before or after it, and it tolerates HTML elements next to it.</p></li>\n <li><p>A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.</p></li>\n <li><p>An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.</p></li>\n </ul>\n</blockquote>\n\n<p>When you visualize this, it looks like this:</p>\n\n<p><img src=\"https://i.stack.imgur.com/mGTYI.png\" alt=\"CSS block vs inline vs inline-block\"></p>\n\n<p>The image is taken from <a href=\"http://dustwell.com/div-span-inline-block.html\" rel=\"nofollow noreferrer\">this page</a>, which also talks some more about this subject.</p>\n", | |
| "source": "so", | |
| "questionId": 9189810 | |
| }, | |
| { | |
| "title": "What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?", | |
| "body": "<p><strong><em>Updated 2018...</em></strong></p>\n\n<p>The <strong>Bootstrap 3</strong> grid comes in <em>4</em> tiers (or \"breakpoints\")...</p>\n\n<ul>\n<li>Extra small (for smartphones <code>.col-xs-*</code>)</li>\n<li>Small (for tablets <code>.col-sm-*</code>)</li>\n<li>Medium (for laptops <code>.col-md-*</code>)</li>\n<li>Large (for laptops/desktops <code>.col-lg-*</code>).</li>\n</ul>\n\n<p>These grid sizes enable you to control grid behavior on different widths. The different tiers are controlled by CSS <a href=\"http://getbootstrap.com/css/#grid-media-queries\" rel=\"noreferrer\">media queries</a>.</p>\n\n<p>So in Bootstrap's 12-column grid...</p>\n\n<p><code>col-sm-3</code> is 3 of 12 columns wide (25%) on a typical <strong>small</strong> device width (> 768 pixels)</p>\n\n<p><code>col-md-3</code> is 3 of 12 columns wide (25%) on a typical <strong>medium</strong> device width (> 992 pixels)</p>\n\n<hr>\n\n<p><strong>The smaller tier (<code>xs</code>, <code>sm</code> or <code>md</code>) also defines the size for larger screen widths</strong>. So, for the <em>same</em> size column on all tiers, just set the width for the smallest viewport...</p>\n\n<p><code><div class=\"col-lg-3 col-md-3 col-sm-3\">..</div></code> is the same as,</p>\n\n<p><code><div class=\"col-sm-3\">..</div></code></p>\n\n<p>Larger tiers are <strong>implied.</strong> Because <code>col-sm-3</code> means <code>3 units on sm-and-up</code>, unless specifically overridden by a larger tier that uses a different size.</p>\n\n<p><code>xs</code>(default) > overridden by <code>sm</code> > overridden by <code>md</code> > overridden by <code>lg</code></p>\n\n<hr>\n\n<p><strong><em>Combine</em> the classes to use change column widths on <em>different</em> grid sizes</strong>. This creates a responsive layout.</p>\n\n<p><code><div class=\"col-md-3 col-sm-6\">..</div></code></p>\n\n<p>The <code>sm</code>, <code>md</code> and <code>lg</code> grids will all \"stack\" vertically on screens/viewports less than 768 pixels. This is where the <code>xs</code> grid fits in. Columns that use the <code>col-xs-*</code> classes will <em>not</em> stack vertically, and continue to scale down on the smallest screens.</p>\n\n<p>Resize your browser <a href=\"http://bootply.com/74886\" rel=\"noreferrer\">using this demo</a> and you'll see the grid scaling effects.</p>\n\n<hr>\n\n<p>In <strong>Bootstrap 4</strong> there is a new <code>-xl-</code> size, see <a href=\"http://codeply.com/go/wzgWxvwyb3\" rel=\"noreferrer\">this demo</a>. Also the <strong><code>-xs-</code> infix has been removed</strong>, so smallest columns are simply <code>col-1</code>, <code>col-2</code>.. <code>col-12</code>, etc.. </p>\n\n<p><code>col-*</code> - 0 (xs)<br>\n<code>col-sm-*</code> - 576px<br>\n<code>col-md-*</code> - 768px<br>\n<code>col-lg-*</code> - 992px<br>\n<code>col-xl-*</code> - 1200px<br></p>\n\n<p><a href=\"https://www.codeply.com/go/O1bv4op7Fh\" rel=\"noreferrer\">Bootstrap 4 Grid Demo</a></p>\n\n<p>Also, this article explains <a href=\"https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc\" rel=\"noreferrer\">more about the Bootstrap grid</a></p>\n", | |
| "source": "so", | |
| "questionId": 19865158 | |
| }, | |
| { | |
| "title": "How to define multiple CSS attributes in JQuery?", | |
| "body": "<p>better to just use <a href=\"http://docs.jquery.com/Addclass\" rel=\"noreferrer\">.addClass</a> even if you have 1 or more. More maintainable and readable.</p>\n\n<p>If you really have the urge to do multiple css props then use </p>\n\n<p>NB Any css props with a hyphen need to be quoted. </p>\n\n<pre><code>.css({\n 'font-size' : '10px',\n 'width' : '30px',\n 'height' : '10px'\n});\n</code></pre>\n\n<p>I've placed the quotes so no one will need to clarify that, and the code will be 100% functional.</p>\n", | |
| "source": "so", | |
| "questionId": 447197 | |
| }, | |
| { | |
| "title": "Can I write a CSS selector selecting elements NOT having a certain class?", | |
| "body": "<p>Typically you add a class selector to the <code>:not()</code> pseudo-class like so:</p>\n\n<pre><code>:not(.printable) {\n /* Styles */\n}\n</code></pre>\n\n<p>But if you need better browser support (IE8 and older don't support <code>:not()</code>), you're probably better off creating style rules for elements that <em>do</em> have the \"printable\" class. If even that isn't feasible despite what you say about your actual markup, you may have to work your markup around that limitation.</p>\n\n<p>Keep in mind that, depending on the properties you're setting in this rule, some of them may either be inherited by descendants that <em>are</em> <code>.printable</code>, or otherwise affect them one way or another. For example, although <code>display</code> is not inherited, setting <code>display: none</code> on a <code>:not(.printable)</code> will prevent it and all of its descendants from displaying, since it removes the element and its subtree from layout completely. You can often get around this by using <code>visibility: hidden</code> instead which will allow visible descendants to show, but the hidden elements will still affect layout as they originally did. In short, just be careful.</p>\n", | |
| "source": "so", | |
| "questionId": 9110300 | |
| }, | |
| { | |
| "title": "Set the table column width constant regardless of the amount of text in its cells?", | |
| "body": "<p>I played with it for a bit because I had trouble figuring it out. </p>\n\n<p>You need to set the cell width (either th or td worked, I set both) AND set the <code>table-layout</code> to <code>fixed</code>. For some reason, the cell width seems to only stay fixed if the table width is set, too (i think that's silly but whatev). Also useful is setting the overflow property to hidden.</p>\n\n<p>You should make sure to leave all of the bordering and sizing for CSS, too.</p>\n\n<p>Ok so here's what I have. </p>\n\n<p>html:</p>\n\n<pre><code><table>\n <tr>\n <th>header 1</th>\n <th>header 234567895678657</th>\n </tr>\n <tr>\n <td>data asdfasdfasdfasdfasdf</td>\n <td>data 2</td>\n </tr>\n</table>\n</code></pre>\n\n<p>CSS:</p>\n\n<pre><code>table{\n border: 1px solid black;\n table-layout: fixed;\n width: 200px;\n}\n\nth, td {\n border: 1px solid black;\n width: 100px;\n}\n</code></pre>\n\n<p><a href=\"http://jsfiddle.net/itamark/uAKNx/\" rel=\"noreferrer\">Here it is in JSFiddle</a></p>\n\n<p>This guy had a similar problem: <a href=\"https://stackoverflow.com/q/446624/534056\">Table cell widths - fixing width, wrapping/truncating long words</a></p>\n", | |
| "source": "so", | |
| "questionId": 4457506 | |
| }, | |
| { | |
| "title": "Why does CSS work with fake elements?", | |
| "body": "<blockquote>\n <p>Why does CSS work with fake elements?</p>\n</blockquote>\n\n<p>(Most) browsers are designed to be (to some degree) forward compatible with future additions to HTML. Unrecognised elements are parsed into the DOM, but have no semantics or specialised default rendering associated with them.</p>\n\n<p>When a new element is added to the specification, sometimes CSS, JavaScript and ARIA can be used to provide the same functionality in older browsers (and the elements have to appear in the DOM for those languages to be able to manipulate them to add that functionality).</p>\n\n<p>(Although it should be noted that work is underway to define a means to <a href=\"http://w3c.github.io/webcomponents/spec/custom/\">extend HTML with custom elements</a>, but this work is in the early stages of development at present so it should probably be avoided until it has matured.)</p>\n\n<blockquote>\n <p>Why doesn't my professor want me to use made-up elements?</p>\n</blockquote>\n\n<ul>\n<li>They are not allowed by the HTML specification</li>\n<li>They might conflict with future standard elements with the same name</li>\n<li>There is probably an existing HTML element that is better suited to the task</li>\n</ul>\n\n<blockquote>\n <p>Also; why didn't he know that made-up elements existed and worked with CSS. Are they uncommon?</p>\n</blockquote>\n\n<p>Yes. People don't use them because they have the above problems.</p>\n", | |
| "source": "so", | |
| "questionId": 20353613 | |
| }, | |
| { | |
| "title": "Best way to center a <div> on a page vertically and horizontally?", | |
| "body": "<h2>The best and most flexible way</h2>\n\n<p><strong>My <a href=\"http://dabblet.com/gist/2872671\">demo on dabblet.com</a></strong></p>\n\n<p>The main trick in this demo is that in the normal flow of elements going from top to bottom, so the <code>margin-top: auto</code> is set to zero. However, an absolutely positioned element acts the same for distribution of free space, and similarly can be centered vertically at the specified <code>top</code> and <code>bottom</code> (does not work in IE7).</p>\n\n<h2>This trick will work with any sizes of <code>div</code>.</h2>\n\n<h3>HTML:</h3>\n\n<pre><code><div></div>\n</code></pre>\n\n<h3>CSS:</h3>\n\n<pre><code>div {\n width: 100px;\n height: 100px;\n background-color: red;\n\n position: absolute;\n top:0;\n bottom: 0;\n left: 0;\n right: 0;\n\n margin: auto;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 356809 | |
| }, | |
| { | |
| "title": "Should I use 'border: none' or 'border: 0'?", | |
| "body": "<p><strong>Both are valid.</strong> It's your choice.</p>\n\n<p>I prefer <code>border:0</code> because it's shorter; I find that easier to read. You may find <code>none</code> more legible. We live in a world of very capable CSS post-processors so I'd recommend you use whatever you prefer and then run it through a \"compressor\". There's no holy war worth fighting here.</p>\n\n<p>That all said, if you're hand-writing all your production CSS, I maintain —despite the grumbling in the comments— it doesn't hurt to be bandwidth conscious. Using <code>border:0</code> <em>will</em> save an infinitesimal amount of bandwidth. On its own that counts for very little but if you <em>make every byte count</em>, you will make your website faster.</p>\n\n<p>The CSS2 specs <a href=\"http://www.w3.org/TR/CSS2/box.html#propdef-border\" rel=\"noreferrer\">are here</a>. These are extended in CSS3 but not in any way relevant to this.</p>\n\n<pre><code>'border'\n Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit\n Initial: see individual properties\n Applies to: all elements\n Inherited: no\n Percentages: N/A\n Media: visual\n Computed value: see individual properties \n</code></pre>\n\n<p>You can use any combination of width, style and colour.<br>\nHere, <code>0</code> sets the width, <code>none</code> the style. They have the same rendering result: nothing is shown.</p>\n", | |
| "source": "so", | |
| "questionId": 2922909 | |
| }, | |
| { | |
| "title": "How to remove Firefox's dotted outline on BUTTONS as well as links?", | |
| "body": "<pre class=\"lang-css prettyprint-override\"><code>button::-moz-focus-inner {\n border: 0;\n}\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 71074 | |
| }, | |
| { | |
| "title": "Vertically centering a div inside another div", | |
| "body": "<p><a href=\"http://codepen.io/meodai/pen/XbEqZw?editors=010\" rel=\"nofollow noreferrer\"><strong>tl;dr</strong></a></p>\n\n<p>Vertical align middle works, but you will have to use <code>table-cell</code> on your parent element and <code>inline-block</code> on the child.</p>\n\n<p>This solution is not going to work in IE6 & 7. <br>Yours is the safer way to go for those. <br>But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.</p>\n\n<p><strong>The classic solution (table layout)</strong></p>\n\n<p>This was my original answer. It still works fine and is the solution with the widest support. Table-layout will <a href=\"http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/#tables\" rel=\"nofollow noreferrer\">impact your rendering performance</a> so I would suggest that you use one of the more modern solutions.</p>\n\n<p><a href=\"http://jsfiddle.net/mcSfe/\" rel=\"nofollow noreferrer\">Here is an example</a></p>\n\n<hr>\n\n<p><strong>Tested in:</strong> </p>\n\n<ul>\n<li>FF3.5+</li>\n<li>FF4+</li>\n<li>Safari 5+</li>\n<li>Chrome 11+</li>\n<li>IE9+</li>\n</ul>\n\n<hr>\n\n<p><strong>HTML</strong></p>\n\n<pre><code><div class=\"cn\"><div class=\"inner\">your content</div></div>\n</code></pre>\n\n<p><strong>CSS</strong></p>\n\n<pre><code>.cn {\n display: table-cell;\n width: 500px;\n height: 500px;\n vertical-align: middle;\n text-align: center;\n}\n\n.inner {\n display: inline-block;\n width: 200px; height: 200px;\n}\n</code></pre>\n\n<hr>\n\n<p><strong>Modern solution (transform)</strong></p>\n\n<p>Since transforms are <a href=\"http://caniuse.com/#search=2d%20transforms\" rel=\"nofollow noreferrer\">fairly well supported now</a> there is an easier way to do it.</p>\n\n<p><strong>CSS</strong></p>\n\n<pre><code>.cn {\n position: relative;\n width: 500px;\n height: 500px;\n}\n\n.inner {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%,-50%);\n width: 200px;\n height: 200px;\n}\n</code></pre>\n\n<p><a href=\"http://jsfiddle.net/0tc6ycvo/1/\" rel=\"nofollow noreferrer\">Demo</a> </p>\n\n<hr>\n\n<p><strong>♥ my favourite modern solution (flexbox)</strong></p>\n\n<p>I started to use flexbox more and more <a href=\"http://caniuse.com/#search=flexbox\" rel=\"nofollow noreferrer\">its also well supported now</a> Its by far the easiest way.</p>\n\n<p><strong>CSS</strong></p>\n\n<pre><code>.cn {\n display: flex;\n justify-content: center;\n align-items: center; \n}\n</code></pre>\n\n<p><a href=\"http://codepen.io/meodai/pen/PqRebp?editors=110\" rel=\"nofollow noreferrer\">Demo</a></p>\n\n<p>More examples & possibilities:\n<a href=\"http://codepen.io/meodai/pen/XbEqZw?editors=110\" rel=\"nofollow noreferrer\">Compare all the methods on one pages</a> </p>\n", | |
| "source": "so", | |
| "questionId": 6490252 | |
| }, | |
| { | |
| "title": "AngularJS ngClass conditional", | |
| "body": "<p>Your first attempt was almost right, It should work without the quotes.</p>\n\n<pre><code>{test: obj.value1 == 'someothervalue'}\n</code></pre>\n\n<p>Here is a <a href=\"http://plnkr.co/edit/j4r8MDt3Q77NFJlhv7oQ?p=preview\" rel=\"noreferrer\">plnkr</a>.</p>\n\n<p>The ngClass directive will work with any expression that evaluates truthy or falsey, a bit similar to Javascript expressions but with some differences, you can read about <a href=\"http://docs.angularjs.org/guide/expression\" rel=\"noreferrer\">here</a>.\nIf your conditional is too complex, then you can use a function that returns truthy or falsey, as you did in your third attempt.</p>\n\n<p>Just to complement: You can also use logical operators to form logical expressions like </p>\n\n<pre><code>ng-class=\"{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}\"\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 16529825 | |
| }, | |
| { | |
| "title": "How to turn off word wrapping in HTML?", | |
| "body": "<p>You need to use the CSS <a href=\"http://www.impressivewebs.com/css-white-space/\" rel=\"noreferrer\"><code>white-space</code></a> attribute.</p>\n\n<p>In particular, <code>white-space: nowrap</code> and <code>white-space: pre</code> are the most commonly used values. The first one seems to be what you 're after.</p>\n", | |
| "source": "so", | |
| "questionId": 4652654 | |
| }, | |
| { | |
| "title": "How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?", | |
| "body": "<p><strong>NOTE</strong>: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: <a href=\"https://stackoverflow.com/a/23300532/1155721\">https://stackoverflow.com/a/23300532/1155721</a></p>\n\n<hr>\n\n<p>I suggest you take a look at <a href=\"http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks\" rel=\"noreferrer\">Equal Height Columns with Cross-Browser CSS and No Hacks</a>.</p>\n\n<p>Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.</p>\n\n<p>Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.</p>\n", | |
| "source": "so", | |
| "questionId": 1122381 | |
| }, | |
| { | |
| "title": "Alternate table row color using CSS?", | |
| "body": "<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"true\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>$(document).ready(function()\r\n{\r\n $(\"tr:odd\").css({\r\n \"background-color\":\"#000\",\r\n \"color\":\"#fff\"});\r\n});</code></pre>\r\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>tbody td{\r\n padding: 30px;\r\n}\r\n\r\ntbody tr:nth-child(odd){\r\n background-color: #4C8BF5;\r\n color: #fff;\r\n}</code></pre>\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>\r\n<table border=\"1\">\r\n<tbody>\r\n<tr>\r\n<td>1</td>\r\n<td>2</td>\r\n<td>3</td>\r\n<td>4</td>\r\n</tr>\r\n<tr>\r\n<td>5</td>\r\n<td>6</td>\r\n<td>7</td>\r\n<td>8</td>\r\n</tr>\r\n<tr>\r\n<td>9</td>\r\n<td>10</td>\r\n<td>11</td>\r\n<td>13</td>\r\n</tr>\r\n</tbody>\r\n</table></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>There is a CSS selector, really a pseudo-selector, called nth-child. In pure CSS you can do the following:</p>\n\n<pre><code>tr:nth-child(even) {\n background-color: #000000;\n}\n</code></pre>\n\n<p><strong>Note:</strong> No support in IE 8.</p>\n\n<p>Or, if you have jQuery:</p>\n\n<pre><code>$(document).ready(function()\n{\n $(\"tr:even\").css(\"background-color\", \"#000000\");\n});\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 3084261 | |
| }, | |
| { | |
| "title": "Is it possible to set the equivalent of a src attribute of an img tag in CSS?", | |
| "body": "<p>Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/content\" rel=\"noreferrer\"><code>content:url(\"image.jpg\")</code></a>.</p>\n\n<p>Full working solution (<kbd><a href=\"http://jsfiddle.net/3BRN7/406/\" rel=\"noreferrer\">Live Demo</a></kbd>):</p>\n\n<p><div class=\"snippet\" data-lang=\"js\" data-hide=\"false\" data-console=\"false\" data-babel=\"false\">\r\n<div class=\"snippet-code\">\r\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code><!doctype html>\r\n\r\n<style>\r\n.MyClass123{\r\n\tcontent:url(\"http://imgur.com/SZ8Cm.jpg\");\r\n}\r\n</style>\r\n\r\n<img class=\"MyClass123\"/></code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Tested and working:</p>\n\n<ul>\n<li>Chrome 14.0.835.163 </li>\n<li>Safari 4.0.5 </li>\n<li>Opera 10.6 </li>\n</ul>\n\n<p>Tested and <strong>Not</strong> working:</p>\n\n<ul>\n<li>FireFox 40.0.2 (observing Developer Network Tools, you can see that the URL loads, but the image is not displayed)</li>\n<li>Internet Explorer 11.0.9600.17905 (URL never loads)</li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 2182716 | |
| }, | |
| { | |
| "title": "What does the ">" (greater-than sign) CSS selector mean?", | |
| "body": "<p><code>></code> is the <a href=\"http://www.w3.org/TR/selectors/#child-combinators\" rel=\"noreferrer\">child combinator</a>, sometimes mistakenly called the direct descendant combinator.<sup>1</sup></p>\n\n<p>That means the selector <code>div > p.some_class</code> only selects paragraphs of <code>.some_class</code> that are nested <strong>directly inside</strong> a <code>div</code>, and not any paragraphs that are nested further within.</p>\n\n<p>An illustration:</p>\n\n<pre class=\"lang-html prettyprint-override\"><code><div>\n <p class=\"some_class\">Some text here</p> <!-- Selected [1] -->\n <blockquote>\n <p class=\"some_class\">More text here</p> <!-- Not selected [2] -->\n </blockquote>\n</div>\n</code></pre>\n\n<p>What's selected and what's not:</p>\n\n<ol>\n<li><p><strong>Selected</strong><br>\nThis <code>p.some_class</code> is located directly inside the <code>div</code>, hence a parent-child relationship is established between both elements.</p></li>\n<li><p><strong>Not selected</strong><br>\nThis <code>p.some_class</code> is contained by a <code>blockquote</code> within the <code>div</code>, rather than the <code>div</code> itself. Although this <code>p.some_class</code> is a descendant of the <code>div</code>, it's not a child; it's a grandchild.</p>\n\n<p>Consequently, while <code>div > p.some_class</code> won't match this element, <code>div p.some_class</code> will, using the <a href=\"http://www.w3.org/TR/selectors/#descendant-combinators\" rel=\"noreferrer\">descendant combinator</a> instead.</p></li>\n</ol>\n\n<hr>\n\n<p><sup>1</sup> <sub>Many people go further to call it \"direct child\" or \"immediate child\", but that's completely unnecessary (and incredibly annoying to me), because a child element <strong>is immediate <em>by definition</em></strong> anyway, so they mean the exact same thing. There's no such thing as an \"indirect child\".</sub></p>\n", | |
| "source": "so", | |
| "questionId": 3225891 | |
| }, | |
| { | |
| "title": "Why is @font-face throwing a 404 error on woff files?", | |
| "body": "<p>I was experiencing this same symptom - 404 on woff files in Chrome - and was running an application on a Windows Server with IIS 6.</p>\n\n<p>If you are in the same situation you can fix it by doing the following:</p>\n\n<h1>Solution 1</h1>\n\n<p>\"Simply add the following MIME type declarations via IIS Manager (HTTP Headers tab of website properties): <strike>.woff application/x-woff</strike>\"</p>\n\n<p><strong>Update:</strong> according to <a href=\"https://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts\">MIME Types for woff fonts</a> and <a href=\"https://stackoverflow.com/a/9484251/326\">Grsmto</a> the actual MIME type is <strong>application/x-font-woff</strong> (for Chrome at least). x-woff will fix Chrome 404s, x-font-woff will fix Chrome warnings.</p>\n\n<p><img src=\"https://i.stack.imgur.com/2caxh.png\" alt=\"IIS 6 MIME Types\"></p>\n\n<p>Thanks to Seb Duggan: <a href=\"http://sebduggan.com/posts/serving-web-fonts-from-iis\" rel=\"noreferrer\">http://sebduggan.com/posts/serving-web-fonts-from-iis</a></p>\n\n<h1>Solution 2</h1>\n\n<p>You can also add the MIME types in the <strong>web config</strong>:</p>\n\n<pre><code> <system.webServer>\n <staticContent>\n <remove fileExtension=\".woff\" /> <!-- In case IIS already has this mime type -->\n <mimeMap fileExtension=\".woff\" mimeType=\"application/x-font-woff\" />\n </staticContent> \n </system.webServer>\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 4015816 | |
| }, | |
| { | |
| "title": "Select elements by data attribute in CSS", | |
| "body": "<p>If you mean using an <a href=\"http://www.w3.org/TR/selectors/#attribute-selectors\">attribute selector</a>, sure, why not:</p>\n\n<pre><code>[data-role=\"page\"] {\n /* Styles */\n}\n</code></pre>\n\n<p>There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a \"new HTML5 feature\",</p>\n\n<ul>\n<li><p>browsers typically don't have any problems supporting non-standard attributes, so you should be able to filter them with attribute selectors; and</p></li>\n<li><p>you don't have to worry about CSS validation either, as CSS doesn't care about non-namespaced attribute names as long as they don't break the selector syntax.</p></li>\n</ul>\n", | |
| "source": "so", | |
| "questionId": 5324415 | |
| }, | |
| { | |
| "title": "Minimum and Maximum value of Z-INDEX", | |
| "body": "<p><a href=\"http://www.w3.org/TR/CSS21/visuren.html#z-index\" rel=\"noreferrer\">http://www.w3.org/TR/CSS21/visuren.html#z-index</a></p>\n\n<blockquote>\n <p><strong>'z-index'</strong></p>\n \n <p><em>Value</em>: auto | <integer> | inherit</p>\n</blockquote>\n\n<p><a href=\"http://www.w3.org/TR/CSS21/syndata.html#numbers\" rel=\"noreferrer\">http://www.w3.org/TR/CSS21/syndata.html#numbers</a></p>\n\n<blockquote>\n <p>Some value types may have integer\n values (denoted by <integer>) or\n real number values (denoted by\n <number>). Real numbers and\n integers are specified in decimal\n notation only. An <integer>\n consists of one or more digits \"0\" to\n \"9\". A <number> can either be an\n <integer>, or it can be zero or\n more digits followed by a dot (.)\n followed by one or more digits. Both\n integers and real numbers may be\n preceded by a \"-\" or \"+\" to indicate\n the sign. -0 is equivalent to 0 and is\n not a negative number.</p>\n \n <p>Note that many properties that allow\n an integer or real number as a value\n actually restrict the value to some\n range, often to a non-negative value.</p>\n</blockquote>\n\n<p>So basically there are no limitations for z-index value in the CSS standard, but I guess most browsers limit it to signed 32-bit values (−2147483648 to +2147483647) in practice (64 would be a little off the top, and it doesn't make sense to use anything less than 32 bits these days)</p>\n", | |
| "source": "so", | |
| "questionId": 491052 | |
| }, | |
| { | |
| "title": "Twitter Bootstrap - add top space between rows", | |
| "body": "<p>Editing or overriding the row in Twitter bootstrap is a bad idea, because this is a core part of the page scaffolding and you will need rows without a top margin. </p>\n\n<p>To solve this, instead create a new class \"top-buffer\" that adds the standard margin that you need.</p>\n\n<pre><code>.top-buffer { margin-top:20px; }\n</code></pre>\n\n<p>And then use it on the row divs where you need a top margin.</p>\n\n<pre><code><div class=\"row top-buffer\"> ...\n</code></pre>\n", | |
| "source": "so", | |
| "questionId": 10085723 | |
| }, | |
| { | |
| "title": "Offset a background image from the right using CSS", | |
| "body": "<p>I found this CSS3 feature helpful:</p>\n\n<pre><code>/* to position the element 10px from the right */\nbackground-position: right 10px top;\n</code></pre>\n\n<p>As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.</p>\n\n<p>See <a href=\"http://caniuse.com/#feat=css-background-offsets\">Can I use</a> for details on the supported browsers.</p>\n\n<p>Used source: <a href=\"http://tanalin.com/en/blog/2011/09/css3-background-position/\">http://tanalin.com/en/blog/2011/09/css3-background-position/</a></p>\n", | |
| "source": "so", | |
| "questionId": 5142405 | |
| } | |
| ] | |
| }, | |
| { | |
| "Author": "AllThingsSmitty", | |
| "url": "https://github.com/AllThingsSmitty/css-protips", | |
| "format": "html", | |
| "tips": [ | |
| { | |
| "title": 'Use a CSS Reset', | |
| "body": `<p>CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. You can use a CSS reset library like <a href="http://necolas.github.io/normalize.css/">Normalize</a>, <em>et al.</em>, or you can use a more simplified reset approach:</p> | |
| <pre><code class="css language-css"> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </code></pre> | |
| <p>Now elements will be stripped of margins and padding, and <code>box-sizing</code> lets you manage layouts with the CSS box model.</p> | |
| <h4 id="demohttpcodepenioallthingssmittypenkkrkll"><a href="http://codepen.io/AllThingsSmitty/pen/kkrkLL">Demo</a></h4>`, | |
| }, | |
| { | |
| "title": 'Inherit box-sizing', | |
| "body": `<p>Let <code>box-sizing</code> be inherited from <code>html</code>:</p> | |
| <pre><code class="css language-css"> | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *::before, *::after { | |
| box-sizing: inherit; | |
| } | |
| </code></pre> | |
| <p>This makes it easier to change <code>box-sizing</code> in plugins or other components that leverage other behavior.</p>`, | |
| }, | |
| { | |
| "title": 'Use :not() to Apply/Unapply Borders on Navigation', | |
| "body": `<p>Instead of putting on the border...</p> | |
| <pre><code class="css language-css"> | |
| /* add border */ | |
| .nav li { | |
| border-right: 1px solid #666; | |
| } | |
| </code></pre> | |
| <p>...and then taking it off the last element...</p> | |
| <pre><code class="css language-css"> | |
| /* remove border */ | |
| .nav li:last-child { | |
| border-right: none; | |
| } | |
| </code></pre> | |
| <p>...use the <code>:not()</code> pseudo-class to only apply to the elements you want:</p> | |
| <pre><code class="css language-css"> | |
| .nav li:not(:last-child) { | |
| border-right: 1px solid #666; | |
| } | |
| </code></pre> | |
| <p>Sure, you can use <code>.nav li + li</code> or even <code>.nav li:first-child ~ li</code>, but with <code>:not()</code> the intent is very clear and the CSS selector defines the border the way a human would describe it.</p> | |
| <h4 id="demohttpcodepenioallthingssmittypenlkymvo"><a href="http://codepen.io/AllThingsSmitty/pen/LkymvO">Demo</a></h4>`, | |
| }, | |
| { | |
| "title": 'Add line-height to body', | |
| "body": `<p>You don't need to add <code>line-height</code> to each <code><p></code>, <code><h*></code>, <em>et al</em>. separately. Instead, add it to <code>body</code>:</p> | |
| <pre><code class="css language-css"> | |
| body { | |
| line-height: 1.5; | |
| } | |
| </code></pre> | |
| <p>This way textual elements can inherit from <code>body</code> easily.</p> | |
| <h4 id="demohttpcodepenioallthingssmittypenvjbdyd"><a href="http://codepen.io/AllThingsSmitty/pen/VjbdYd">Demo</a></h4>`, | |
| }, | |
| { | |
| "title": 'Vertically-Center Anything', | |
| "body": `<p>No, it's not black magic, you really can center elements vertically:</p> | |
| <pre><code class="css language-css"> | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| display: -webkit-flex; | |
| display: flex; | |
| } | |
| </code></pre> | |
| <p>Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has <a href="https://css-tricks.com/centering-css-complete-guide/">a nice write-up</a> on doing all of that.</p> | |
| <p><strong>Note:</strong> Watch for some <a href="https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items">buggy behavior</a> with flexbox in IE11.</p>`, | |
| }, | |
| { | |
| "title": 'Comma-Separated Lists', | |
| "body": `<p>Make list items look like a real, comma-separated list:</p> | |
| <pre><code class="css language-css"> | |
| ul > li:not(:last-child)::after { | |
| content: ","; | |
| } | |
| </code></pre> | |
| <p>Use the <code>:not()</code> pseudo-class so no comma is added to the last item.</p> | |
| <p><strong>Note:</strong> This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.</p>`, | |
| }, | |
| { | |
| "title": 'Select Items Using Negative nth-child', | |
| "body": `<p>Use negative <code>nth-child</code> in CSS to select items 1 through n.</p> | |
| <pre><code class="css language-css"> | |
| li { | |
| display: none; | |
| } | |
| /* select items 1 through 3 and display them */ | |
| li:nth-child(-n+3) { | |
| display: block; | |
| } | |
| </code></pre> | |
| <p>Or, since you've already learned a little about using <code>:not()</code>, try:</p> | |
| <pre><code class="css language-css"> | |
| /* select all items except the first 3 and display them */ | |
| li:not(:nth-child(-n+3)) { | |
| display: none; | |
| } | |
| </code></pre> | |
| <p>Well that was pretty easy.</p> | |
| <h4 id="demohttpcodepenioallthingssmittypenwxjkzp"><a href="http://codepen.io/AllThingsSmitty/pen/WxjKZp">Demo</a></h4>` | |
| }, | |
| { | |
| "title": 'Use SVG for Icons', | |
| "body": `<p>There's no reason not to use SVG for icons:</p> | |
| <pre><code class="css language-css"> | |
| .logo { | |
| background: url("logo.svg"); | |
| } | |
| </code></pre> | |
| <p>SVG scales well for all resolution types and is supported in all browsers <a href="http://caniuse.com/#search=svg">back to IE9</a>. So ditch your .png, .jpg, or .gif-jif-whatev files.</p> | |
| <p><strong>Note:</strong> If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:</p> | |
| <pre><code class="css language-css"> | |
| .no-svg .icon-only::after { | |
| content: attr(aria-label); | |
| } | |
| </code></pre>`, | |
| }, | |
| { | |
| "title": 'Use the "Lobotomized Owl" Selector', | |
| "body": `<p>It may have a strange name but using the universal selector (<code>*</code>) with the adjacent sibling selector (<code>+</code>) can provide a powerful CSS capability:</p> | |
| <pre><code class="css language-css"> | |
| * + * { | |
| margin-top: 1.5em; | |
| } | |
| </code></pre> | |
| <p>In this example, all elements in the flow of the document that follow other elements will receive <code>margin-top: 1.5em</code>.</p> | |
| <p>For more on the "lobotomized owl" selector, read <a href="http://alistapart.com/article/axiomatic-css-and-lobotomized-owls">Heydon Pickering's post</a> on <em>A List Apart</em>.</p> | |
| <h4 id="demohttpcodepenioallthingssmittypengrrvwq"><a href="http://codepen.io/AllThingsSmitty/pen/grRvWq">Demo</a></h4>` | |
| }, | |
| { | |
| "title": 'Use max-height for Pure CSS Sliders', | |
| "body": `<p>Implement CSS-only sliders using <code>max-height</code> with overflow hidden:</p> | |
| <pre><code class="css language-css"> | |
| .slider { | |
| max-height: 200px; | |
| overflow-y: hidden; | |
| width: 300px; | |
| } | |
| .slider:hover { | |
| max-height: 600px; | |
| overflow-y: scroll; | |
| } | |
| </code></pre> | |
| <p>The element expands to the <code>max-height</code> value on hover and the slider displays as a result of the overflow.</p>` | |
| }, | |
| { | |
| "title": 'Equal-Width Table Cells', | |
| "body": `<p>Tables can be a pain to work with so try using <code>table-layout: fixed</code> to keep cells at equal width:</p> | |
| <pre><code class="css language-css"> | |
| .calendar { | |
| table-layout: fixed; | |
| } | |
| </code></pre> | |
| <p>Pain-free table layouts.</p> | |
| <h4 id="demohttpcodepenioallthingssmittypenjalalm"><a href="http://codepen.io/AllThingsSmitty/pen/jALALm">Demo</a></h4>` | |
| }, | |
| { | |
| "title": 'Get Rid of Margin Hacks With Flexbox', | |
| "body": `<p>When working with column gutters you can get rid of <code>nth-</code>, <code>first-</code>, and <code>last-child</code> hacks by using flexbox's <code>space-between</code> property:</p> | |
| <pre><code class="css language-css"> | |
| .list { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .list .person { | |
| flex-basis: 23%; | |
| } | |
| </code></pre> | |
| <p>Now column gutters always appear evenly-spaced.</p>`, | |
| }, | |
| { | |
| "title": 'Use Attribute Selectors with Empty Links', | |
| "body": `<p>Display links when the <code><a></code> element has no text value but the <code>href</code> attribute has a link:</p> | |
| <pre><code class="css language-css"> | |
| a[href^="http"]:empty::before { | |
| content: attr(href); | |
| } | |
| </code></pre> | |
| <p>That's pretty convenient.</p> | |
| <h4 id="demohttpcodepenioallthingssmittypenzbzxrx"><a href="http://codepen.io/AllThingsSmitty/pen/zBzXRx">Demo</a></h4>`, | |
| }, | |
| { | |
| "title": 'Style "Default" Links', | |
| "body": `<p>Add a style for "default" links:</p> | |
| <pre><code class="css language-css"> | |
| a[href]:not([class]) { | |
| color: #008000; | |
| text-decoration: underline; | |
| } | |
| </code></pre> | |
| <p>Now links that are inserted via a CMS, which don't usually have a <code>class</code> attribute, will have a distinction without generically affecting the cascade.</p> | |
| `, | |
| }, | |
| { | |
| "title": 'Consistent Vertical Rhythm', | |
| "body": `<p>Use a universal selector (<code>*</code>) within an element to create a consistent vertical rhythm:</p> | |
| <pre><code class="css language-css"> | |
| .intro > * { | |
| margin-bottom: 1.25rem; | |
| } | |
| </code></pre> | |
| <p>Consistent vertical rhythm provides a visual aesthetic that makes content far more readable.</p>`, | |
| }, | |
| { | |
| "title": 'Intrinsic Ratio Boxes', | |
| "body": `<p>To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:</p> | |
| <pre><code class="css language-css"> | |
| .container { | |
| height: 0; | |
| padding-bottom: 20%; | |
| position: relative; | |
| } | |
| .container div { | |
| border: 2px dashed #ddd; | |
| height: 100%; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| } | |
| </code></pre> | |
| <p>Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).</p> | |
| <h4 id="demohttpcodepenioallthingssmittypenjalzve"><a href="http://codepen.io/AllThingsSmitty/pen/jALZvE">Demo</a></h4>`, | |
| }, | |
| { | |
| "title": 'Style Broken Images', | |
| "body": `<p>Make broken images more aesthetically-pleasing with a little bit of CSS:</p> | |
| <pre><code class="css language-css"> | |
| img { | |
| display: block; | |
| font-family: Helvetica, Arial, sans-serif; | |
| font-weight: 300; | |
| height: auto; | |
| line-height: 2; | |
| position: relative; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| </code></pre> | |
| <p>Now add pseudo-elements rules to display a user message and URL reference of the broken image:</p> | |
| <pre><code class="css language-css"> | |
| img::before { | |
| content: "We're sorry, the image below is broken :("; | |
| display: block; | |
| margin-bottom: 10px; | |
| } | |
| img::after { | |
| content: "(url: " attr(src) ")"; | |
| display: block; | |
| font-size: 12px; | |
| } | |
| </code></pre> | |
| <p>Learn more about styling for this pattern in <a href="https://github.com/ireade/">Ire Aderinokun</a>'s <a href="http://bitsofco.de/styling-broken-images/">original post</a>.</p>`, | |
| }, | |
| { | |
| "title": 'Use "rem" for Global Sizing; Use "em" for Local Sizing', | |
| "body": `<p>After setting the base font size at the root (<code>html { font-size: 100%; }</code>), set the font size for textual elements to <code>em</code>:</p> | |
| <pre><code class="css language-css"> | |
| h2 { | |
| font-size: 2em; | |
| } | |
| p { | |
| font-size: 1em; | |
| } | |
| </code></pre> | |
| <p>Then set the font-size for modules to <code>rem</code>:</p> | |
| <pre><code class="css language-css"> | |
| article { | |
| font-size: 1.25rem; | |
| } | |
| aside .module { | |
| font-size: .9rem; | |
| } | |
| </code></pre> | |
| <p>Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.</p>`, | |
| }, | |
| { | |
| "title": 'Hide Autoplay Videos That Aren\'t Muted', | |
| "body": `<p>This is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video:</p> | |
| <pre><code class="css language-css"> | |
| video[autoplay]:not([muted]) { | |
| display: none; | |
| } | |
| </code></pre> | |
| <p>Once again, we're taking advantage of using the <code>:not()</code> pseudo-class.</p>`, | |
| }, | |
| { | |
| "title": 'Use ":root" for Flexible Type', | |
| "body": `<p>The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using <code>:root</code>:</p> | |
| <pre><code class="css language-css"> | |
| :root { | |
| font-size: calc(1vw + 1vh + .5vmin); | |
| } | |
| </code></pre> | |
| <p>Now you can utilize the <code>root em</code> unit based on the value calculated by <code>:root</code>:</p> | |
| <pre><code class="css language-css"> | |
| body { | |
| font: 1rem/1.6 sans-serif; | |
| } | |
| </code></pre> | |
| <h4 id="demohttpcodepenioallthingssmittypenxkgokr"><a href="http://codepen.io/AllThingsSmitty/pen/XKgOkR">Demo</a></h4>`, | |
| }, | |
| { | |
| "title": 'Set "font-size" on Form Elements for a Better Mobile Experience', | |
| "body": `<p>To avoid mobile browsers (iOS Safari, <em>et al</em>.) from zooming in on HTML form elements when a <code><select></code> drop-down is tapped, add <code>font-size</code> to the selector rule:</p> | |
| <pre><code class="css language-css"> | |
| input[type="text"], | |
| input[type="number"], | |
| select, | |
| textarea { | |
| font-size: 16px; | |
| } | |
| </code></pre>`, | |
| } | |
| ] | |
| } | |
| ]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment