keithclark / selectivizr Goto Github PK

I'd like to load selectivizr.js into the page only if I'm in a browser that I'll need it.

this is related to issue #3. as document.write will blow up attempts to lazy load scripts.

the trick is selectivizr.js might load before or after "dom ready" .. so we'll need to watch the document.readyState instead of waiting for events to fire (that already did). i think..

When working with compressed (YUI) CSS files selectivizr crashes and removes all style from the page. When I'm only compressing the CSS it all works fine.

I asume the script can't handle the YUI compressing (1 line for all CSS)? With simple compressing (1 line per rule) the script works fine.

Further debugging points out that IE8 removes all style while IE7 loads the stylings but throws an error (can't find file)

Any ideas on how to solve this (except not using YUI compression)?

There's this project here: https://github.com/Idered/cssParentSelector

You should consider merging/joining forces and merge https://github.com/keithclark/JQuery-Extended-Selectors as well

first, thanks for create this script, its very percect! But I'm have a problem here.

if I use this script, my site going in very slow speed. And after click any button for go to checkout page, I aways need tip F5 in keyboard for resume play..

IE 8, Im use Windows XP for tests.. (yes, in Brazil Mastercard uses IE 8 and Win XP for validation afiliations.. 👎 )

My scripts:

        'bundles/frontend/js/lib/jquery-1.9.1.js'
        'bundles/frontend/js/lib/underscore.js'
        'bundles/frontend/js/lib/diacritics.js'
        'bundles/frontend/js/lib/bootstrap-2.3.1.js'
        'bundles/frontend/js/lib/jquery-ui-1.10.2.custom.js'
        'bundles/frontend/js/datepicker-translations.js'

thnks

Hi,

I found that selectors don't work when they're inside a media query. Of course, I use Respond.js to have the real media query behavior in IE6-8.

I don't know where the issue comes... Maybe selectivizr don't match any media queries? (which will be a relevant behavior since IE6-8 don't support them).

I hope you'll find out what's going on...

To "Twitter Bootstrap 2.3.1" contains the css like this.

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}

Error dialog similar to the following is displayed in IE8 using both selectivizr.js above.

in ie7 (could be ie6+ie8 as well) selectivizr seems to break the hover states for ajax loaded dom elements

jquery 1.6.1, selectivizr 1.0.3b (and lower)

This is not an issue but more of a request.

Is it possible to use one of the existing selector engines (or strip down a selector engine if possible) instead of requiring the user to include an entire Js framework such as jQuery if they don't need or use it.

I like the idea of your script but want to not be forced to use a framework.

When I use the unminified it works again. Any thoughts?

Hi!

Just wondering whether I'm doing something wrong or it's a bug:

http://jsbin.com/azijof/1/edit

As you can see on the screenshot, it doesn't seem to work in older IE (tested in ie6 but it probably happens in 7 and 8 too).

Any ideas?

Thanks!

I was having problems with IE7, in particular, not loading media queries. Figured this was something to do with targeting elements from my CSS using banner[role="banner"], for example.

I changed my respond JS code to this version: scottjehl/Respond#36

This solved my problem, but now things like nth-child are not rendering with selectivizr.

Not up with JS at all, so wasn't sure whether to post this to this github, or Respond.

Hi there

when using

#id div:nth-child(2) ~ p

it's doesn't seem to work.

Does the script only support the pseudo element to be the last one?

Regards!

jQuery 1.9+ supports the :lang selector.

Yet when using with :not(), such as :not(:lang(en)), that's still not working.

:before and :after cannot be used with CSS3 selectors such as :nth-child, :nth-of-type, first-of-type, :last-child, ...... etc.

For example, these aren't working:

div:nth-child(2):before {   }
div:last-child:after {   }
div:nth-of-type(3):after {   }

Stylesheets that are included as a data URI should be ignored. Currently, selectivizr thinks the data URI is an external link and tries to download the content.

An example of a simple stylesheet data URI is:

Is there a way to allow Bower to get the latest 1.0.3b versions as the latest I can get using Bower is 1.0.2?

Can a component.json file be add to allow for Bower to become more useful?

This issue only occurs for a page within an iframe. It was tested with IE7 and IE8 using jQuery.

The DOM is not ready when applyPatches runs, so selectorMethods always returns an empty list. To validate this I added the following code to the beginning of applyPatches():

var testSelector = ".layout-fluid-sidebar > .col:first-child";
log(jQuery(testSelector).length);
jQuery(function () {
    log(jQuery(testSelector).length);
});

The first value logged is 0 while the second value is 1. There is nothing special about this particular selector. The same behavior occurs no matter which one is tested.

If I open the same page directly rather than from within an iframe, both logged values are 1.

Hello,

First of all thanks for this great tool.

So, my question is if it's possible to apply the CSS after DOM modifications?

An example:

The HTML file:

<table>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr><!-- Appears red -->
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr><!-- Appears red -->
</table>

The CSS file:

tr:nth-child(even) td { background:red;}

The javascript code:

$("<tr><td>Row 5</td></tr>").appendTo("table tbody")
$("<tr><td>Row 6</td></tr>").appendTo("table tbody") 

In this example the 'Row 6' dont' appears in color red, because the style of new nodes is not applied.

Is there a solution?

Thanks!

this old dean edwards snippet was used in jquery but was removed due to edge case incompatibilities.

the doScroll basic check from diego perini (called IEContentLoaded) is much safer.

Would be really great to have this as a nuget package (on nuget.org).

Preferably with the "selectivizr-version.js" and "selectivizr-version.min.js" naming convention.

Hey,

IE8 has a bug where using the rowspan or colspan attribute selector on a <th> or <td> will apply to ALL the <th> or <td> elements...

ex:
th[rowspan] will apply to ALL <th> in IE8.

http://jhop.me/ie8-bugs#tdtrattributematch

Any chance this is something that selectivizr would be able to fix?

This is a list of additional test cases that need added to the selectivizr test suite. Feel free to add your own suggestions.

• :target pseudo
• lazy/async loading
• tag test

On my website contact form (menu "Contact") is loaded via ajax.

Searching the internet I found this thread on google groups, but do not know if this feature has been implemented.

How do I run selectivizr manually in a particular div to display correctly in IE6 .. 8??

Sometimes we change HTML elements' structure or add new elements by JavaScripting. In such cases, Selectivizr may not work for those elements. So could we have a mechanism to run Selectivizr at a specific time? Such as after all elements have been modified by JavaScripting.

For example:

<script>
var selectivizrPause = true; // this variable tells Selectivizr to not execute after it has been loaded.
</script>
<script src="selectivizr.js"></script>

Then we could add the following line at the end of $(document).ready(function() { }) (after all DOM modification codes) to run Selectivizr.

selectivizrRun();

Even with the html5 shiv you can't style the new HTML5 inputs in IE7 with attribute selectors (e.g. [type="number"]). Presumably IE7 is setting them to type="text" before the styles are applied and Selectivizr doesn't take this into account and applies the wrong styles (often making the situation worse than if Selectivizr wasn't used at all).

So BROKEN_ATTR_IMPLEMENTATIONS needs to have a value for IE7. I don't really see a good way of doing this without listing out all the new HTML5 inputs. The quick fix is to just change it to ieVersion>7.

I'm working with Middleman to test locally and build my files, minifying then.

Testing locally (where there are any kind of minifying), selectvizr works fine in IE7 and IE8. On build, where everything is minified, it doesn't work at all. And no error is given at console.

Solution for my case: disable HTML and CSS minify for instance, but I believe that's an issue.

Sorry my bad english.

I was using IE9 compatibility mode to simulate IE7 (issue was also in IE8 document mode) included selectivizr v1.0.3b and on load it would error in the resolveUrl function on the line

if (url.charAt(0) == "/") {
            return getProtocolAndHost(contextUrl) + url;
        }

The error was in the if, the variable url was undefined. So without really knowing what that function does, i seem to have been able to solve the issue by adding this line near the top of the function

if (!url) return "";

Would it be possible to add child selector (E>F) and adjacent sibling selector (E+F) for IE6?
It is great to use CSS3 selector with IE6 but there is no easy solution for this important CSS2 selectors.

var ieVersion = /MSIE ([\d])/.exec(navigator.userAgent)[1];

you're gonna want a + after that \d

Now this bug doesnt really affect anything since you discard IE before 6 and after 8 (until we hit IE version 60...)

but it's good to have this fixed in case someone else snags that code for their own use.

The latest fix that prevents the IE test from causing minification issues was never retagged as 1.0.3, thus the latest version that bower picks up is 1.0.2 which still contains the error. Please rev the version and mark 1.0.3 as latest.

I just noticed that if I include Selectivizr in a Facebook tab application (an iframe) nothing shows up, the iframe is completely blank (even though the content is there, I can see there are links by hovering on the "white" with the pointer).

Not sure what it might be. For now, I removed Selectivizr altogether from the tab.

Hover doesn't work on elements inserted after Selectivizr has run. Deleting the whole hover case fixed the issue for my circumstances but is obviously not the proper solution.

You can repeat the issue by using IE9 in IE7/8 modes and the following files. "Boo!" will only appear in the original element when Selectivizr is included.

EDIT: A hosted example http://dl.dropbox.com/u/17827955/selectivizr-gh32/index.html

style.css:

span {
    visibility: hidden;
}

div:hover span {
    visibility: visible;
}

index.html:

<!doctype html>
<html>
<head>
    <link href="style.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- I could only find a hosted version of 1.0.2, but 1.0.3b has the same problem -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
</head>
<body>
    <div>Hello <span>Boo!</span></div>
    <a href="#">Add element</a>

    <script>
    $('a').click(function() {
        $('<div>Hello <span>Boo!</span></div>').insertBefore($(this));
    });
    </script>
</body>
</html>

If CSS is compiled with sourcemap(from SCSS in my particular case), selectivizr stops working.

When including a css file that happens to be empty, the following error will occur:

SCRIPT5007: Unable to get property 'replace' of undefined or null reference
selectivizr.js, line 428 character 4

I suspect this happens because on line 391, xhr.responseText will be undefined, instead of an empty string.

Tested on IE10-as-IE8 on Windows 7.

Is nth-of-type supported in newer versions of jquery? The overview on the site states not, but that targets jquery 1.3/1.4, while the current version is 1.7...

Hello!

When using a font-face CSS definition, selectivizr has a bug which results in IE7 not showing any page elements. It seems like they're invisible.

The following CSS is triggering the bug:

@font-face {
font-family: 'Colaborate-Thin';
src: url('colaborate-thin.eot');
src: url('colaborate-thin.eot?iefix') format('eot'),
url('colaborate-thin.woff') format('woff'),
url('colaborate-thin.ttf') format('truetype'),
url('colaborate-thin.svg#webfont8nzqAfDm') format('svg');
}

It seems it has to do something with the functions
parseStyleSheet() or resolveUrl(), but I'm not sure.

Regards,
Thasmo

It is understandable that when selectivizr was being introduced, the mobile web was not popular. While nowadays, websites use media queries for their mobile versions becomes a trend.

It's unproductive to scan and parse those thousands of lines of CSS codes within media queries for IE8 and below as they don't support media queries at all.

So in the next release please consider removing codes of media queries before parsing. Thanks.

Details and a fix (editing the selectivizr source) are available at http://stackoverflow.com/questions/12809122/selectivizr-causes-select-dropdown-to-require-two-clicks-to-open-in-ie8-below

Is this project a dead one?

Last update is a year ago?

In order to get custom cursors working in all browsers you need to specify extra non-URL fallback (for FF 3.6). But for IE to be able to interpret that there can't be any extra space after url closing bracket. Selectivizr is adding that space and therefore braking custom cursors.
This happens in line 451 of the development version. There should be extra case for urls that have comma after them (eg. cursor).
Example:

• this is fine

.my_cursor {
  cursor: url(...), -moz-zoom-in;
}

• this doesn't work in IE

.my_cursor {
  cursor: url(...) , -moz-zoom-in;
}

Take this code for example:

https://gist.github.com/983983

When testing via IE8.0.6001.19019/Vista:

Based on my bare-bones example, there appears to be a bug and/or conflict with jQuery, Selectivizr, externally-linked CSS and background images not on same server as CSS file.

When I embed the CSS into the document, then both relative and/or absolute (to another server) background image URIs work.

When I link to the CSS and point my background-image to an absolute URI (on different server) then the background image disappears from view. When background image URI is relative to CSS file then the image will appear on page.

When I remove link to jQuery from foot of document, then everything works.

I am not sure what all of this means... Heck, is this a bug with Selectivizr or Jquery? Both? Am I doing something wrong?

The solution would be:

1. Don't use jquery
2. Find alternative to #flag CSS.
3. Embed css
4. Use relative URI to background image.
5. Other?

Selectivizr is some awesome code!!! I hope I am not missing something obvious here.

Thanks for listening.

Cheers,
Micky

I can't use Selectivizr on my current project because the CSS files are hosted on a subdomain. The script could check to see if a stylesheet's href is on the same domain, and if not use XDomainRequest instead of XMLHttpRequest.

I believe this only works on IE8 or higher, and requires the Access-Control-Allow-Origin header on the server with the CSS file be set to permit the request. Those seem like reasonable implementation trade-offs for this functionality, however.

Hi!

I am working on fast and lightweight replacement of Sizzle. It is a polyfill for IE6+ and w3c browsers to bring part of CSS4 selector API as well as CSS3 selector API.

The polyfill

Currently it support :scope, ! and nodesRef part from CSS4 Selector API:

document.querySelector("div! a[href*=twitter]");// div that has **a** element with _href_ attribute that contains "twitter"
document.querySelectorAll("body footer! div");// NodeList:[footer], if <footer> in <body> and <footer> contains <div>
document.documentElement.querySelector(":scope>*");// regulary would be <head>
document.querySelector(":scope>*", document.documentElement);// the same result - <head>
document.documentElement.querySelector(":scope>*:nth-child(2n+1)");// regulary would be <head> also
document.querySelector(":scope>*:nth-child(2n+2)", document.documentElement);// regulary would be <body>

Polyfill patches native [documet/node].querySelector[All] methods and using native functions when it possible.

My proposal is to add support of [documet/node].querySelector[All] in Selectizr. For supporting IE < 8 selectivizr can take querySelector[All] from document.documentElement node:

var $$ = function(node, selector) {
    return document.documentElement.querySelectorAll.call(node, selector)
}
var $$0 = function(node, selector) {
    return document.documentElement.querySelector.call(node, selector)
}
var matchNode = function(node, selector) {
    return document.documentElement.matches.call(node, selector)
}

First of all, fantastic work with Selectivizr! I've applied it to many sites and found it incredibly useful.

Currently I'm having an issue with IE8 intermitantely white-screen-of-death'ing when Selectivizr is included in the site. The site is quite big and there's a lot of other JavaScript so it could be an issue with compatiability?

The site in question is puregym dot com and the WSOD is happening intermittantely on XP based PCs - it mainly seems to be happening to our kiosk machines but it has been happening on our usual desktops too.

I know this is an ever-recurring issue in javascript. I don't know precisely how to solve it, so don't blame for that, please :)

Two things come to mind:

1. XDomainRequest I believe it's called, but it requires a header to be sent at the other end, which is not always easy to configure, given enterprisey CMS'es.
2. Stick a <script type=text/css> (yes, script, not style) in the DOM, load it up with the CSS and read it out. Maybe it will work, who knows.

What else can we do to work around this problem?

Personally, I don't need IE7 support that much. It would be a nice-to-have to support IE7, not a requirement.

Hello,

first of all thanks for this great tool.

Yesterday, I was testing selectivizr and I found a problem with the shorthand declarations. I have been trying to reduce the usecase to minimum:

-- reset.css --

table, tr, td {
    background: transparent;
}

-- end reset.css --

-- style.css --

tr:nth-child(odd){
    background-color: rgb(0,255,0);
}

tr:nth-child(even){
    background-color: rgb(0,155,0);
}

-- end style.css --

-- index.html --

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
    <head>
        <title>Selectivizr Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

        <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
    &lt;!--[if (gte IE 6)&(lte IE 8)]>
    &lt;script type="text/javascript" src="js/selectivizr.js">&lt;/script>
    &lt;![endif]-->

&lt;/head>
&lt;body>
    &lt;table border="0">
        &lt;tbody>
            &lt;tr>&lt;td>Col1&lt;/td>&lt;td>Col2&lt;/td>&lt;/tr>
            &lt;tr>&lt;td>Col1&lt;/td>&lt;td>Col2&lt;/td>&lt;/tr>
            &lt;tr>&lt;td>Col1&lt;/td>&lt;td>Col2&lt;/td>&lt;/tr>
        &lt;/tbody>
    &lt;/table>

</body>

</html>


-- end index.html --
I tested the usecase in a Internet Explorer 7 vs. Firefox 4 and in the first one, the table is white and the second  is green.
Do you know anything about it?
See you,
    

win.XMLHttpRequest throws:
Message: Object doesn't support this property or method

Consider testing for ActiveXObject first and falling back to XMLHttpRequest after:

    try {
        return( window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest( ) );
    } catch(e) {
        return null;
    }

Anyone else have this problem?

Every few page loads or refreshes, this script doesn't run, or does not run correctly. I can tell because every few refreshes, the tell-tale 'slvzr-' classes are missing, as if the script never ran at all.

What would cause selectivizr, or any script for that matter, to not work every few page loads?

A full description of the problem is here:

http://stackoverflow.com/questions/8660508/ie7-and-ie8-randomly-not-able-to-load-external-script

Hi,

I think you could consider to add a function to specify the CSS selecting function. Then, we could plug in less-used libs like qwery.

What do you think about that?