css3

问题 I don't understand what makes flex items switch from grow to shrink behavior? At first I thought it is the flex-basis value, but what if only one item has it, or none? Also, the specs on flex-basis say: The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item. What does that mean? If I have one item with it, and the rest are default, why is it usually starts a little bigger than the value? Where does the added space come from? 回答1: The flex-basis

问题 Given the following class declarations and code... .foo > a { color:green; } .bar a { color:red; } <div class="bar"> <div class="foo"> <a href="#">SOME LINK</a> </div> </div> ... I thought that the link would be green because, while both declarations have a class (010) and an element (001), .foo has the direct descendant selector. But alas, the link is red. Why? 回答1: There's no value for > for css specificity. Both case have 11 value for specificity: .foo > a { color:green; }/*specificity

问题 Can anyone point me in the right direction? I have a DIV with a background image that is fixed, but I'd like it to scroll at a slower rate when scrolling down the page. I'm not great with jQuery or CSS3 so asking for some help. Thanks in advance. 回答1: This may help: http://stephband.info/jparallax/ It turns nodes into absolutely positioned layers that move in response to the mouse. 回答2: http://potentpages.com/parallax-scroll-tutorial/ Here is a tutorial that my company and I created

问题 I am using SASS for the first time, and my variables seem to have stopped working. I have the following code in my application.css.scss file: *= require_self */ @import "layout"; @import "colors"; ... @import "text"; In my partial _colors.css.scss file, there is: ... $ct-white: #F8F8F8 !global; and in my partial _layout.css.scss file (the Rails default layout file): /* Site-wide layout syntax */ body { background-color: $ct-white; } I know that the _layout.css.scss file is loading because

问题 I have a group of divs arranged in a grid. To style each div I'm selecting them with the nth-child() pseudo-class. div.tile:nth-child(4n-7) .text { background-color: yellow; } A user can hide divs by clicking on a button (which fires a jQuery function that adds a display: none rule to the class attribute in the selected div). jQuery $('.hide-divs').click(function () { $('.dolphin').toggleClass('hidden'); }) CSS .hidden { display: none; } Here's the problem: Even though display: none removes

问题 I need a quick and dirty way to detect media query support using jquery. I defined a function as follows: function mediaQueriesEnabled () { var v = parseFloat($.browser.version); if ($.browser.msie) { if (v < 9) return (false); } return (true); } Can someone help me fix this up a bit? Looking at this page: http://caniuse.com/css-mediaqueries I realized that there are some complexities here. For example, when I test my version of safari, I get "534.57.2". I want to avoid installing modernizr

问题 I need a quick and dirty way to detect media query support using jquery. I defined a function as follows: function mediaQueriesEnabled () { var v = parseFloat($.browser.version); if ($.browser.msie) { if (v < 9) return (false); } return (true); } Can someone help me fix this up a bit? Looking at this page: http://caniuse.com/css-mediaqueries I realized that there are some complexities here. For example, when I test my version of safari, I get "534.57.2". I want to avoid installing modernizr

问题 I'm fiddling around with a CSS grid-based frontend and the following behaviour is required over and over and over again in different parts of the frontend: A grid with a variable number of rows. Every row should have a variable size (auto will do). The last row should always take up all the remaining space. So in the case I happen to need five rows, this does the trick: .myGridForFiveRows { display: grid; grid-template-rows: auto auto auto auto 1fr; } However, I'd really like a stylesheet

问题 According to this article, http://www.standardista.com/css3/font-face-browser-support IE supports @font-face but I couldn't find any site which has valid custom font face working for IE Also, if IE supports custom font via @font-face from early on (IE6), then why people still using cufon for instance? Any clarifications or examples? 回答1: Older version of Internet Explorer supports Embedded OpenType (EOT) files before @font-face was formalized in CSS3. You can find compatible files on sites

问题 I'm looking for a way to add an HTML tag for CSS content property inside :after and :before . Unlike this question which only discusses adding symbols like < . What I'm trying to add is something like: .breadcrumbs li a:before { content: '<i class="icon"></i>'; } Is there any possible way to do that? 回答1: This is impossible. You cannot generate markup from CSS. It should also be unnecessary - stick your background image / icon font / whatever in the generated pseudo-element you have already.