How to Resolve The CSS Warnings for Browser Specific Selectors in Bootstrap 3

How can i resolve the css warnings for browser specific selectors in Bootstrap 3?

The most important thing to note is that Chrome is telling you that it thinks those CSS selectors are invalid. That does not, however, mean they're inherently and/or universally invalid or that you've erred in some way.

Two foundational coding points:

Browsers (usually) ignore most things they don't understand and that generally goes for CSS as well.
While browsers try to adhere to the core specifications, when it comes to CSS they're notorious for having their own CSS attributes for certain things, especially when supporting legacy browsers.

So, with those two things in mind, CSS writers who have a large, varied browser base to support (e.g., Twitter Bootstrap) will throw in all the CSS selectors and such for all browsers they intend to support, knowing that IE will ignore selectors supported by WebKit-based browsers, and Chrome will ignore IE-specifics, and so on.

Here's a related article on this technique when handling gradients: CSS3 Linear Gradient Syntax Breakdown.

Another reason you might be seeing the warning recently is that

Chrome 27 was the last version to support WebKit.

So if you see a CSS warning for "-webkit-overflow-scrolling" and if you're using Chrome 28 or later then I can see why you'd start seeing WebKit-related CSS warnings. (I didn't regression test with pre- and post-WebKit versions of Chrome to 100% confirm this, but my Geek Intuition™ is 90% confident that's what is going on here).

Again, I wouldn't worry about it, so long as what you're seeing is what you're expecting. Be sure to test with a WebKit-based browser to make sure the WebKit-targeted code works as expected, too.

Why so many bootstrap warnings in my console?

GET http://np.lexity.com/embed/YW/5eac58cc7afdade1c6dea905c5dc7617?id=af1b3d2a1d3a net::ERR_BLOCKED_BY_CLIENT

Are you using AdBlock or similar extension with Chrome? It looks like so, because your browser blocks HTTP requests to that domain.

About second part of your question. Is it Firefox's console log? If it is, Firefox is not able to process another vendor prefixes except it's own.

Why is CSS not styling this Bootstrap webpage?

Bootstrap's

.navbar-default .navbar-brand {

is more specific than your

.navbar-brand {

and

.navbar-header a {

You want to keep your code more specific.

IE8 issue with Twitter Bootstrap 3

You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup

Note See also: https://github.com/scottjehl/Respond/pull/206

Update:

Please read: http://getbootstrap.com/getting-started/#support

In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.

See also: https://github.com/scottjehl/Respond

For this reason the basic template contains these lines in the head section:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

Custom CSS Won't Work With Bootstrap

The issue was temporarily fixed by using Bootstrap's CDN instead of hosting it locally. I believe the larger problem had to do with caching which can be fixed by the following, <link href="XXX.css?v=1.0" rel="stylesheet" type="text/css" />

Cache fix courtesy of @mayersdesign

What are all of these W3C CSS Validation Warnings About?

These CSS vendor extensions (like most) are from a time when browsers were beginning to implement newer CSS3 rules and had different enough implementations that the non-prefixed properties weren't always accepted yet for compatibility reasons.

At this point, these look like they'd all be safe to remove from your CSS, but there's no particular benefit in doing so.