Hot answers tagged

17

I think it really depends on what you find easiest for development and what helps you keep a tidy stylesheet. The only real downside I can think of in splitting would be that should an element's attribute appear in all your stylesheets, you would have to update 5 separate files to change it (rather than it appearing side-by-side in one place). According ...


9

It will not use the browser default font. But rather it will use the default sans-serif font. Since the last font in the font stack is not a specific font. It is a generic name. Some browsers allow you to set it or it will default to the OS of the users computer. Reference URL: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family


7

With CSS you can manage two classes and attached them to your HTML element like the following: .my-font { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } .otherClass { background-color: white; } <div class="my-font otherClass">An HTML element</div> Otherwise, you can take a look to a solution like SASS. The used ...


6

The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit. You can read about it here, but the crux is: For many years the CSS :visited selector has been a vector for querying a user’s history. It’s not particularly dangerous by itself, but when it’s combined with getComputedStyle() in ...


6

The Campaign Monitor people maintain a big table of CSS support in various mail clients. There's a changelog at bottom with running notes, and a bunch of CSS3 properties(mostly decorative) were initially added April 2010.


5

Its probably best to have only one CSS file, but to minify and gzip it. Assuming your 30KB are before doing that, you will probably get the file size down to about 5KB with minification (white space removal) and gzipping. Splitting up will probably get you some more speedup, but only under some conditions. You'd have to make sure that only one stylesheet ...


4

@import in-and-of itself is slow. You shouldn't be using unless absolutely necessary and in this case I don't think it is. Just create a second <link> element to the style sheet with the font rules or include them in styles.css. Unused font that needs to be downloaded will not be downloaded so declaring them but never using them will not hurt ...


4

It will resort to the default font of the browser. In this case with the sans-serif specification it would look for the default sans-serif font. I think for Windows this font is Arial, and for Mac it's Helvetica (don't quote me on that, it's been a long time since I've looked). If no sans-serif font exists on the machine, the browser will switch over to its ...


4

why is using multiple consecutive line breaks in HTML considered a bad practice Because it breaks the fundamental principle of separation of concerns: by mixing the "content" and "presentation" layers. By using multiple <br>s to create "margins" you are embedding the presentation in the content. To change the "margins" you need to change the content. ...


4

It slightly depends on what you want to achieve: are you trying to make your page load faster or are you trying to make developing easier? If you target on the latter, than you could use multiple sheets, but thats all a matter of preference. I find it the easiest to use one big file since this gives you an overview of all the styles you've declared. If you ...


3

You should split your CSS files based on media queries because CSS files are render blocking. When the browser is constructing your DOM, it has to first wait and load all your CSS files. You will reduce your page load time if some of your CSS files are only loaded based on certain media queries. This also goes for adding async to a JavaScript script tag; ...


3

You could also define your font with @font-face: @font-face { font-family: MainFont; src: local('Lucida Sans Unicode'), local('Lucida Grande'); } @font-face { font-family: HeadlineFont; src: local('Arial'), local('Helvetica'); } @font-face { font-family: SerifFont; src: local('Georgia'), local('Times'), local('Times New Roman'); } ...


3

You could add a class to your style sheet for each font family, such as: .fontA {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;} .fontB {font-family: arial, helvetica, sans-serif;} .fontC {Georgia, Times, "Times New Roman", serif;} Then use it like this, with the other rules: <div class="otherRule1 fontA "> </div> <p class=...


3

Your find that neither Chrome or Firefox is rendering Ambient via the @Font-Face and what is happening is that the Crusive Font is rendering slightly different in Firefox than Chrome (Very Little Difference, but its using Crusive not Ambient, Fix posted below) Chrome, and Firefox render fonts differently from one another so sometimes you notice no change, ...


3

It's always good to go for % because it guarantees fluid content. It's good both for Google and your users to have a good mobile version of your site. I don't think there would be a difference in the performance or at least not a difference that you can spot. You can test it by putting both of the properties and testing your page speed with a tool for both ...


3

There is a performance difference between the two, using background-size: 100%; is not supported for Android 4.3 Browser and below. Also, background-size percentage values are not properly supported for SVG images on Safari. Also, iOS Safari has long had very buggy behaviour with background-size: cover. All this info is from the excellent Can I Use... ...


3

When we use before it means, this css will apply (virtually) before the default content in html element, and vice-versa for after but the catch is these are called pseudo selectors, which does not change the real DOM, i.e. the change would be visible but not real. Refer this to learn more about it : https://css-tricks.com/almanac/selectors/a/after-and-...


2

Unfortunately there is little you can do for the users that use older browsers, whether it be out of ignorance, inability to update (in the case of a corporate environment), or lack of money for newer computers/operating systems (IE 9 and 10 don't install in Windows XP, for example). It is impractical to make a interactive website that is backward ...


2

It was not included in CSS3 for a few reasons. A little more about reasons can be found at https://stackoverflow.com/questions/4781141/why-doesnt-the-selector-h3nth-child1containsa-work/4781167#4781167 The best alternative to use is CSS3 Substring Matching Attribute Selectors which allow wild cards


2

It is normal for sites to look a little bit different in cache view. The cache usually tries to load resources from your server. This is problematic when: Users are using the cache because your site is down or slow Resources are not permitted by the browser to be loaded cross domain The latter may be the problem with fonts. It sounds like you found a ...


2

I dont think anyone can give you specific advice on why respnsive design is so hard to code, but there are usually two approaches. A. you design for the smallest possible screen and work your way up (mobile first), or b you start with the largest possible screen and work your way down. You can get very elaborate with things, and its a matter of user ...


2

I'd be inclined to say this. For production, always keep them in one file; the reason being that it's more efficient for the browser, and that should be your primary interest (IMO) when moving from development to production. Development's a different kettle of fish. I tend to split Media queries up so that they're by whatever element, eg: .foo { // .. ...


2

You appear to be looking for a fixed aspect ratio box. That is possible in CSS, but not with calculations. Instead you have to use some trickery. Padding in CSS is always based on the width of the box. You can use bottom padding on a pseudo element to force the height to be 30% less than the width. .mybox { width: 80%; } .mybox:before { content: ...


2

To answer your question, one must know the content and the purpose of your website. A navigation bar is there to guide but the design of yours seems to be more distracting than guiding. As a general rule of thumb, keep it simple, clear and easily accessible (sticky navigation bars) to avoid scrolling. Guide but don't distract. The design of your ...


2

closetnoc and billal make very good points. If I made add, while I do like some sort of animation on sites, I think it is best to keep things animated under these 2 conditions with the second being what I would use in a case where it is a logo. Animations should be used to catch a user's attention, basically a call to action. I do not think personally ...


2

Without seeing your code it is hard to give you an exact answer, but it will be something like textarea:focus, input:focus{ outline: none; } But this covers your entire site, so you might want to be more specific using a class or ID if you only want to alter that specific field.


1

Belay my last! I found it. Of course this is always the way... On this page: https://developers.google.com/custom-search/docs/tutorial/implementingsearchbox I found that instead of <gcse:searchbox-only></gcse:searchbox-only>, you would need to use and modify <gcse:searchbox-only resultsUrl="YOUR_RESULTS_PAGE_URL"></gcse:searchbox-only&...


1

Because a line break is used to break a line and not add margin. The effect may appear the same but the semantics are not. If you want a margin on a div, use "margin". You have people who turn CSS off? I doubt that. You have visitors with javascript turned off? Those who know how to do that are the same who know what to expect as a result.


1

I know it's an old question, but it's the first one in the Google search results. I've been searching for a solution and after some weeks of unsuccessfull testing, I could find the solution. Add this code in your .htaccess: # Allow access from all domains for web fonts <IfModule mod_headers.c> <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|woff2)$"...


1

Simple: use 1 stylesheet and just add comments to them to make it easier to find and change the CSS styles e.g.: //sheet 1 (mobile device 800 px) code //sheet 2 (mobile device 768 px) code //sheet 3 (mobile device 480 px) code //sheet 4 (desktop size 1024 px) code If you want you could use multiple stylesheets and call them for each specific size.


Only top voted, non community-wiki answers of a minimum length are eligible