css3

问题 I'm trying following CSS, it works in Firefox and Chrome but does not work in the Safari (5.1). I have checked Safari supports nth-child. What I'm doing wrong? CSS: option:nth-child(2){ display: none; } HTML: <select> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> Demo: http://jsfiddle.net/Kv9tj/ 回答1: You can always use: nth-of-type(2) . Browser support for :nth-of-type is fairly decent... Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3

问题 Is there any way to achieve this in CSS3?: height: 100% -110px; My context: 回答1: What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon. As for your example, maybe sticky footer will be some inspiration for you. Edit Nowadays it's well supported by major browsers: http://caniuse.com/calc 回答2: You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational

问题 Is there anyway to find out if there currently is a transition running on my page? Not on a specific element but globally for the whole page? Thanks 回答1: To see when a css transition has ended you can use transitionend . The transitionend event is fired when a CSS transition has completed. source: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend Where you can just use 'flags' to see when the animation has completed and when not. Here an example: var

问题 I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website https://infinum.co/ So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or JavaScript/jQuery. $(function() { $(".block").on("click", function() { $(this).addClass("fullscreen"); }); }); html, body { margin: 0; padding: 0;

问题 Is it possible to edit the height of the background color in my span? HTML <span class="highlight">Some highlighted text</span> CSS .highlight{ font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.5em; background-color: #4db6ac; line-height: 2em; } What I want to do is for the highlight to be 1.8em. I'm not sure how to implement this without it being too tedious (ie. lots of divs ). 回答1: You can use a vertical linear-gradient with transparent top and bottom color (I've used red

问题 Is it possible to edit the height of the background color in my span? HTML <span class="highlight">Some highlighted text</span> CSS .highlight{ font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.5em; background-color: #4db6ac; line-height: 2em; } What I want to do is for the highlight to be 1.8em. I'm not sure how to implement this without it being too tedious (ie. lots of divs ). 回答1: You can use a vertical linear-gradient with transparent top and bottom color (I've used red

问题 I dont understand whats going on here because when I had this code on its own it was working (in FireFox): @font-face { font-family: 'mmfont'; src: url('/scripts/mmfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } Then I added a second font in exactly the same manner, but only the first one was working: @font-face { font-family: 'mmfont2'; src: url('/scripts/mmfont2.ttf') format('truetype'); font-weight: normal; font-style: normal; } Then I used a font-generator to get

问题 Is there a way to use the calc function in @supports(propertyName, value)? i mean where <supports_condition> is only for the calc function. @supports ( <supports_condition> ) { .col-3 { width: calc(25% - 20px/4) } .col-4 { width: calc(33.3333333% - 20px/3) } .col-6 { width: calc(50% - 20px/2) } } 回答1: Support for @supports is far, far more restricted than calc() because the latter was introduced several years earlier (most notably, IE doesn't support @supports at all, whereas it has supported

问题 In a HTML5 / CSS3 Demo I am making, Im using CSS transitions mostly to speed up the performance. I was wondering for my UI - where currently JQuery manipulates the LEFT attribute of a container Div based on mouse position for example, should I instead use transform: translateX(tx) instead? or does JQuery do this automatically if the browser supports it? 回答1: jquery does not use transform: translateX(tx) instead. You have to do it manualy. But its a good practice to do this, because its

问题 I have titles using pseudo elements added to the title div as decoration, but I need to stop them affecting the width of a site when in mobile view. Example (this is how it looks on desktop, and I am happy with this): #block-yui_3_17_2_40_1485776710186_66574::before { background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee5c6d 0%, #66648b 0%, #91a8d0 40%, #91a8d0 100%) repeat scroll 0 0; box-sizing: border-box; content: ""; height: 200px; left: 10%; overflow: hidden; position: absolute;