Google Search Console: Googlebot cannot access CSS and JS files

Google recently has sent a warning email "Googlebot cannot access CSS and JS files" to webmasters. In the email, Google said that the ranking will be affected if it can not access your CSS and JS files (quote: "Google understand that your website works properly so blocking access to these assets can result in suboptimal rankings"). This may be came from changes in Google's algorithms recently especially on mobile.

 

The warning email also shows you a solution to fix, but it may cause you take time to follow or research. Actually, you can solve the problem simply by modifying the robots.txt file on your website (e.g. http://yourwebsite.com/robots.txt). Just allow folders that contains your CSS and JS files. Below is the robots.txt file of my Joomla website after modified:

The syntax to allow is:
Allow: /thefoldername/

You can use "robots.txt Tester" tool in your webmaster tool to verify again to make sure Googlebot can access these files well. That's all.

Please let me know if you have any idea.

CSS: gradient background color for all browsers

Ultimate CSS Gradient Generator is a power tool can help you generate CSS code of gradient background color for all browsers.

It also supports to generate SCSS code.

Let enjoy it.

CSS: horizontal ul li

HTML
<ul class="mylist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>

CSS
.mylist li
{
display: inline;
float: left;
list-style-type: none;
padding-right: 20px;
}

CSS img shadow and change border on hover

For example, you have html a tag as the following:
<a class= 'aclass' href='aurl' title='short text' target='_blank'><img src='imgurl' style='width:160px;  height:160px;' class='ish' alt='short text' title='short text' /></a>

Let try the css below:

.aclass img
{
margin: 3px 4px 5px 4px;
border: 1px solid #C0C0C0;
}

.ish
{
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, .75);
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, .75);
-goog-ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, .75);
box-shadow: 2px 2px 4px rgba(0, 0, 0, .75);
filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=120, Strength=5);
}

img.ish:hover
{
border: 1px solid green;
}

CSS: Set width and height for "a" tag

To set width and height for "a" tag ==> must declare:
display: block;

CSS: full screen background

Use background-size property, for example:

body{
padding:0px;
margin:0px;
position: relative;
height: 100%;
width: 100%;
background-image:url('images/background.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-family: arial,helvetica,sans-serif;
}

CSS: What does !important mean?

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.


However, the !important rule was also put in place to help Web page users cope with style sheets that might make pages difficult for them to use or read. Typically, if a user defines a style sheet to view Web pages with, that style sheet will be over-ruled by the Web page author's style sheet. But if the user marks a style as !important, that style will overrule the Web page author's style sheet, even if the author marks their rule as !important.
This is a change from CSS1 to CSS2. In CSS1, author !important rules took precedence over user !important rules. CSS2 changed this to make the user's style sheet have precedence.

Check user browser to switch css

Use global variable: HTTP_USER_AGENT

<?php if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobile') || strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'android')) : ?>
    <!-- your specific css here -->
<?php endif; ?>

IE CSS: Make input password same size with input text

Let declare css for input types with same font, e.g:

<style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>

CSS3 Box Shadow & Background Opacity / Transparency

Ref:
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
http://www.w3schools.com/css/css_image_transparency.asp

Used in casting shadows off block-level elements (like divs).

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

1. The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
2. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
3. The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
4. The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur).
5. Color

Example

Inner Shadow

.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}

Example

Internet Explorer Box Shadow

You need extra elements...

<div class="shadow1">
 <div class="content">
  Box-shadowed element
 </div>
</div>

.shadow1 {
 margin: 40px;
 background-color: rgb(68,68,68); /* Needed for IEs */

 -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
 box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

 filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
 -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
 zoom: 1;
}
.shadow1 .content {
 position: relative; /* This protects the inner element from being blurred */
 padding: 100px;
 background-color: #DDD;
}

One-Side Only

Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.

.one-edge-shadow {
 -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
         box-shadow: 0 8px 6px -6px black;
}

CSS3 rounded corners with border-radius

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.
Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology.
Here’s a basic example:

This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.

The code for this example is, in theory, quite simple:

#example1 {
border-radius: 15px;
}

However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

How it Works

Rounder corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.
We will firstly deal with the syntax for the individual border-*-radius properties before looking at how the border-radius shorthand property works.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

The border-*-radius properties can each accept either one or two values, expressed as a length or a percentage (percentages refer to the corresponding dimensions of the border box).

The Syntax:

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

Examples:

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Where two values are supplied these are used to define, in order, the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge.
Where only one value is supplied, this is used to define both the horizontal and vertical radii equally.
The following diagram gives a few examples of how corners might appear given differing radii:

If either value is zero, the corner will be square, not round.

border-radius

The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.

The Syntax:

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Examples:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px;

The first set of (1-4) values define the horizontal radii for all four corners. An optional second set of values, preceded by a ‘/’, define the vertical radii for all four corners. If only one set of values are supplied, these are used to determine both the vertical and horizontal equally.
For each set of values the following applies:
If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.

Browser Support

At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.
Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).
Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).

The -moz- prefix

Mozilla’s Firefox browser has supported the border-radius property, with the -moz- prefix, since version 1.0. However, it is only since version 3.5 that the browser has allowed elliptical corners, i.e. accepting two values per corner to determine the horizontal and verical radii independently. Prior to version 3.5, the browser only accepted one value per corner, resulting in corners with equal horizontal and vertical radii.
The syntax, from Firefox 3.5 onwards, for the main part follows the current W3C specification, as described throughout this article, prefixed by -moz-. The only major difference is in the naming of the individual border-*-radius properties, with the -moz- prefixed properties following a slightly different naming convention as follows:

W3C Specification	Mozilla Implementation
border-radius	-moz-border-radius
border-top-left-radius	-moz-border-radius-topleft
border-top-right-radius	-moz-border-radius-topright
border-bottom-right-radius	-moz-border-radius-bottomright
border-bottom-left-radius	-moz-border-radius-bottomleft

The Mozilla implementation also behaves slightly differently from the specification when percentages are supplied. You can read more on the Mozilla Developer Center here.

Cross Browser Examples

Here’s a few basic examples that should work in current versions of Firefox, Safari/Chrome, Opera and even IE9:

A

B

C

D

E

F

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

Additional Notes & Further Reading

The W3C Backgrounds and Borders Specification goes into further detail on how the corner is shaped (especially in circumstances where two adjoining border have different widths), the effect of border-radius on background images, color and style transitions, what happens when curves overlap and the effect of border-radius on tables.
This is best explained in the following sections of the specification:

• 4.4.1 Corner Shaping
• 4.4.2 Corner Clipping
• 4.4.3 Color and Style Transitions
• 4.4.4 Overlapping Curves
• 4.4.5 Effect on Tables