0

I have an idea, and I'm not entirely sure that the interpreter is incapable of handling this already, yet I am sure it does not. Therefore, my question is, does the interpreter already handle the idea I am about to propose.

Esentially, what I would like to do, is nest a block of Javascript into various locations of a stylesheet. The Javascript block should be able to access the scope of the CSS block which it is nested within. Maybe a sample code block would make this a little more clear.

.page {
    <script>
        target.header = document.createElement('div');
        target.header.className = 'pageHeader';
        target.header.heightPerc = 0.2;
        target.header.widthPerc = 1;
        target.header.height = target.clientHeight * target.header.heightPerc;
        target.header.width = target.clientWidth * target.header.widthPerc;
        target.header.style.height = (target.clientHeight * target.header.height) + 'px';
        target.header.style.width = (target.clientWidth * target.header.width) + 'px';
        target.header.style.borderBottom = '1px solid black';
        target.header.style.position = 'absolute';
        target.header.style.top = '0px';
        target.header.style.left = ((target.clientWidth - target.header.width) / 2) + 'px';
        target.appendChild('target.header');
    </script>
}

In my example, the target is meant to be the current element held by the CSS selector

As you can see, this is a CSS class selector with a block of Javascript inside of it, which of course, does not work. The theory is that this block of Javascript acts as a template for each element captured by the CSS selector (similarly to angular.js, yet compiled at the same time as the CSS). Is there a way that something like this could be done already (without the use o third-party libraries or frameworks)?.

Another use that I would want this for would be something like this:

HTML:

<img class="image1" ></img>

CSS:

.image1{
    <script>
        target.src = "(URL for image)";
    </script>
}

If there is any current way to do any of these things, please let me know!

WebWanderer
  • 10,380
  • 3
  • 32
  • 51
  • 1
    I'm afraid no CSS parser will accept that format. You may be able to serve that combined resource as something other than CSS, however, then split it into its CSS and Javascript components and create the appropriate ` – Frédéric Hamidi Oct 27 '14 at 15:18
  • What you're looking for is called templating. I don't know of any library that does this for css, however, only html. – simonzack Oct 27 '14 at 15:18
  • 1
    CSS frameworks like LESS or Stylus let you mixin javascript in your css... http://lesscss.org/ http://learnboost.github.io/stylus/ – almightyBoognish Oct 27 '14 at 15:19
  • 1
    This is not possible and will never be possible. One CSS rule can target multiple elements. There would be many problems if it was possible what you are proposing. – dfsq Oct 27 '14 at 15:19
  • 1
    @dfsq I'm not sure you grasp the concept. Yes, it would grab multiple elemts, thats the point. It iterates over them. Yes, this could cause major problems, if you write your code in a way to be destructive. It would be easy to make endless loops here, as you can see in one class selector I made an element with another class. If in that other classes selector, I made an element with the `page` class, this would be an infinite loop. Also, it would be really bad to apply an 'id' within this block – WebWanderer Oct 27 '14 at 15:30
  • By the way @almightyBoognish these links are very cool. I'm gonna study up on them for a bit to see if they do what I'm looking for, but thank you so much. If I find that they are what I am looking for, I'll alert you through a comment and ask you to post these as my answer. Thanks! – WebWanderer Oct 27 '14 at 15:33
  • 1
    hhmmm, while what you're doing here won't work, it might be possible using the :after/:before psuedo selectors in tandem with the css `content` property. if you can add html tags, it seems plausible unless the creators directly wrote something to block js. Check out this question for some info. http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content – Rooster Oct 27 '14 at 15:34
  • WOW WOW WOW!!! I never even thought about accessing the `content` property through CSS! And I thought I was a JavaScript expert (obviously not a CSS expert)... This is amazing! I can see why people would state that it could be bad practice, but whatever, this is way too cool! I'm not sure if I can match the full functionality of my proposal, but I'll play around. Thank you so much @Rooster. This is great! If I could upvote your comment again, I would. – WebWanderer Oct 27 '14 at 15:56
  • Well, you might all find me crazy, but I've started defining a grammar for a language which would be similar to what I am talking about. No, it won't be written the way I wrote it out in my examples, but the basic idea is there. You would be able to write out statements like CSS, yet be able to alter specific attributes of each element returned and perform calculations, not just alter stylistic attributes. Each block would be a loop, in a way. Do you think this is a good idea? Should I stop now and let this new language die, or should I keep pressing on and see what I can conjure up? – WebWanderer Oct 29 '14 at 14:14

2 Answers2

1

No, I don't think it would work. Something like this works, but I don't think it's what you want.

<script>
document.write("<style>body { background: black }</style>")
</script>
LHLaurini
  • 1,737
  • 17
  • 31
  • Nope, not exactly what I was looking for, but this is an interesting was to do dynamic CSS, yet you should avoid the "document.write"-sourus-rex. Its old and dead. – WebWanderer Oct 27 '14 at 15:31
  • 1
    You could use even PHP, Python or something else to do this. – LHLaurini Oct 27 '14 at 15:33
1

Not javascript, but you can use PHP to do this:

index.css.php

<?php
header("Content-type: text/css");

# Settings
$height = 135; // px

# CSS
echo ".header { height: {$height}px; }";
...

You can then include it into your document like any other css file:

<link rel="stylesheet" type="text/css" href="index.css.php">

If you're up for it, you could even pass client-side params (like window-height, etc.) to the PHP script .. but I think that's bordering on madness..

FloatingRock
  • 6,741
  • 6
  • 42
  • 75
  • 1
    Ok, this may be bordering on madness, but it is still amazingly cool. Aside from the pre-req of being a crazy person to do this, this could yield some interesting power over some things you could acheive. Very awesome man. Thanks! – WebWanderer Oct 27 '14 at 19:09