Get a 404 (Not Found) when using .eqcss file

[Eric Ouellette]

Get a 404 (Not Found) when using .eqcss file

[Eric Ouellette]

Hi,
I get a 404 (Not Found) when using .eqcss file even though I've put the right path in the source attribute in the script tag

[Tommy Hodgins]

Hi Eric,

Are you able to provide an example of the code that's not working for you, and what browser and operating system(s) you're seeing this on?

There's a test page for script-loaded .eqcss files here: https://elementqueries.com/tests/script.html

Can you check that in your browsers to see if the background shows up green? Everywhere I check it that test file works. Thanks!

[Eric Ouellette]

Hi Tommy,

First of all thanks for your reply.

I can see the green background in my browser so it is supposed to work in my project as well.

Is the .eqcss file supposed to have a specific name or be placed at a specific location ?

Here’s the script tag I’m using

<script type="text/javascript" src="Scripts/EQCSS.js"></script> <script src="Scripts/styles.eqcss" type="text/eqcss"></script>

Here’s the code in my .eqcss file

@element #panMiddle and (max-width: 500px) {
#spaSimple_,
#spaAdvanced_,
#spaNavigation_ {
font-size: 0;
}
}

@element #panRight and (max-width: 500px) {
#spaSummary_,
#spaDescription_,
#spaDocuments_ {
font-size: 0;
}
}

@element #panRight and (max-width: 500px) {
.responTip {
display: block;
}
}

@element #panMiddle and (max-width: 500px) {
.responTip {
display: block;
}
}

The Reason why I want to use the external .eqcss file is to isolate the eqcss code out of the CSS code because when I’m using eqcss in the CSS all I see in the devTool is <style></style> instead of the css file where the ccs rules are located, if there is a way for this not to happen let me know.

And by the way I’m not even sure that using a .eqcss file in a script tag would resolved this problem

Your help would be really appreciated

One last thing, why are you using big chunks of slashes and forward slashes between the @element rules in your .eqcss file, is it something I’m supposed to use ?

Thanks

Eric

[Tommy Hodgins]

I can see the green background in my browser so it is supposed to work in my project as well.

Yes, that shows that EQCSS and the browser are working, so whatever the issue is it's not the plugin or this method of loading the files - there must be something else happening here.

Is the .eqcss file supposed to have a specific name or be placed at a specific location ?

No, you can load any file with <script type=text/eqcss> no matter where it's located, it doesn't even need to be named .eqcss just be reachable for the plugin to send a request for the file contents. I wonder if there are any JS errors in your browsers console about being unable to get this file?

Your EQCSS syntax looks good to me, I can parse it with EQCSS.parse and it shows me 4 parsed queries with the right information, so the problem isn't your syntax.

The Reason why I want to use the external .eqcss file is to isolate the eqcss code out of the CSS code because when I’m using eqcss in the CSS all I see in the devTool is <style></style> instead of the css file where the ccs rules are located, if there is a way for this not to happen let me know.

I'm not quite sure what you mean here. There are a number of different ways you can load in EQCSS-powered styles in the browser:

• inline in <style> tags
• externally linked via <link rel=stylesheet>
• inline in <script type=text/eqcss> tags
• externally linked via <script type=text/eqcss> tags
• parsed as a string from JavaScript using EQCSS.process()
• pre-parsed into JS using eqcss-parse, then loaded into the plugin with EQCSS.register()

In any of these ways the plugin can find the queries in your custom EQCSS syntax and parse them into the JavaScript objects it needs to run with the plugin. These parsed queries that are loaded into the browser are visible at EQCSS.data in the browser.

Because @element is not valid CSS syntax it won't show up anywhere that the browser displays parsed CSS - these queries will be dropped by the browser at parsing time and safely ignored.

One last thing, why are you using big chunks of slashes and forward slashes between the @element rules in your .eqcss file, is it something I’m supposed to use ?

This is not something you're supposed to use - I had a bug where stylesheets over a certain size were causing problems, so I added some extra characters to that file just for testing purposes. The syntax of your example is perfect!