There was a belief that CSS3 would introduce custom CSS properties that are easily understood by JavaScript and can influence the behavior of elements. jQuery UI and ASP.NET controls pass styling options through their respective JavaScript APIs, which may concern developers interested in Aspect-Oriented Programming (AOP). It's surprising that CSS custom properties like "-ui-resizable-handles: e se;" haven't been widely embraced. After all, AOP is a fundamental aspect of CSS, isn't it?
If you're looking to borrow an existing property that accepts any string value, consider options like font-family, counter-reset, counter-increment, and animation-name. For example, with counter-reset, you can achieve things like:
CSS
* {counter-reset: inherit;} /* by default, counter-reset does NOT inherit */
HTML
<div style="counter-reset: my-value; "> <!-- setting the value here -->
<p id="para">Some text.</p> <!-- retrieving the result of cascade here -->
</div>
JS
var p_styles = window.getComputedValue(document.getElementById("para"),null);
var p_reset_value = p_styles.counterReset;
var p_myvalue = p_reset_value.split(" ")[0]; /* computed value will be 'my-value 0' */
The only potential compatibility issue may arise if you are using counters in your code, due to unwanted side-effects of the CSS rule. It's also important to note that the value must adhere to the CSS definition of an "identifier". Giving a value with spaces will interpret it as two different counters, and enclosing it in quotes will render the CSS value invalid.
Exploring -webkit-locale
For those feeling adventurous, there's the option to utilize -webkit-locale. As it inherits and accepts a single string value, it simplifies the process compared to the above method, eliminating the necessity for the CSS rule and the JS operation to split the computed value. Additionally, it removes the constraint of the value needing to be a CSS "identifier":
HTML
<div style="-webkit-locale: 'bar foo'; "> <!-- setting the value here -->
<p id="para">Some text.</p> <!-- retrieving the result of cascade here -->
</div>
JS
var style = window.getComputedValue(document.getElementById("para"),null);
var prop = style.webkitLocale; // "bar foo"
Hopefully, in the foreseeable future, we'll have CSS cascading variables available, rendering this workaround unnecessary.
Not exactly what you're looking for, but it definitely saves time and offers more flexibility!
LESS adds dynamic features to CSS like variables, mixins, operations, and functions. It can be used on both the client-side (IE 6+, Webkit, Firefox) and server-side with Node.js.
Indeed, it is a great suggestion! However, I believe there exists a more organic approach to crafting advanced CSS stylesheets: by dynamically generating CSS using server-side technologies like PHP (or ASP, JSP, etc.) alongside HTML. This allows for greater flexibility in choosing which CSS rules to generate based on the source material.
In the past, all webpages were constructed with dynamically generated HTML pages (especially before the advent of AJAX), yet static CSS styles were commonly utilized. One may wonder why this dichotomy existed.
I am currently utilizing codemirror with primefaces extensions in XML Mode. I need to modify the font style of a specific substring to make it bold. For instance, <User> <Name>Micheal</Name> <Age>25</Age> <Addr ...
I've been exploring how to integrate MongoDB with Node.js and the documentation suggests using callbacks. However, I personally prefer working with promises. The issue is, I haven't figured out how to implement promises with MongoDB yet. I attem ...
I am looking to apply a conditional css class and a dynamic css class using the css binding feature. For example: data-bind="css: {$data.something() : true, open : showOpen() }" ...
I've been trying to find an answer to this question online but haven't had any luck. I designed a responsive bottom navbar with Bootstrap, but I'm encountering an issue when listing multiple items using the <li> tag - it creates a new ...
Currently, I am working on creating an Observable using FirebaseObjectObservable. However, before I can accomplish this, I need to query a Firebase list to obtain the key IDs required for the FirebaseObjectObservable. The structure of my data is as follow ...
My stateless component functions as an accordion. When the container div is clicked, I toggle a couple of CSS classes on some child components. Is it acceptable to directly change the classes in the DOM, or should I convert this stateless component to a ...
Greetings and well wishes to everyone. Essentially, I have a div that looks like this: <div class="divele" style="background: url("/image/bkimg.jpg") top center no-repeat;background-size:cover;"></div> Next, there is an upload button where t ...
const express = require('express'); const app = express(); app.use('/app', express.static(path.resolve(__dirname, './app'), { maxage: '600s' })) app.listen(9292, function(err){ if (err) console.log(err); ...
Recently, while working on a 3D web app that involves positional 3D audio, I encountered an issue with crackling noise in the output as the sound source changes position. At first, I suspected it could be related to programming or library problems (specifi ...
The issue I am facing is that the navbar options cannot be opened properly. When clicked, it appears as a solid button and forms a sort of ring around it. I have attempted various solutions such as adding and removing scripts, changing the navbar attribute ...
Working on a project, I want to include Instagram profile pictures by embedding them. Although I have the image URL, I am struggling to integrate it into my HTML page. Take a look at this sample: This provided link displays the Instagram profile picture. ...
After performing a fetch request using JavaScript, I have converted JSON data into CSV format. datetime","open","high","low","close","volume" "2020-01-28","312.48999","318.39999","312.19000","317.69000","31027981" "2020-01-27","309.89999","311.76001","30 ...
Looking for a way to make my mongoDB model query Model.find(query) more flexible. Instead of hardcoding a specific query, I want to be able to pass in dynamic objects to locate specific instances of the model. For example, I need to find instances before a ...
I'm encountering some challenges with updating my view using ngClass despite the back end updating correctly. Below is my controller: @Component({ selector: 'show-hide-table', template: ' <table> <thead> ...
I am struggling with organizing a tree structure. :( My goal is to create a tree structure based on the interface below. export type Tree = Array<TreeNode>; export interface TreeNode { label: string; type: 'folder' | 'file'; ...
I am a beginner in PHP/MySQL and I have some queries. I was watching a YouTube tutorial on creating a basic dynamic website that retrieves data from a MySQL database and displays it on a single PHP index page. I followed the tutorial up to the point wher ...
Let's consider a scenario where the main routing module is defined as follows: // app-routing.module.ts const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'auth', ...
My project consists of multiple dashboards, and I've decided to create separate scripts in my package.json for each one. Building all the dashboards during development when you only need to work on one can be time-consuming. So, I discovered that it&a ...
Could you help me figure out how to move an element within a table row into another table using jQuery? I've been considering using 'append', but it requires session handling. What is the best method in this case: should I use ajax, JSON, PH ...
I am looking to update or refetch data in an Apollo query that is used within a method rather than directly through the Apollo object. The challenge I’m facing is that I need to query and update this data after a specific event, so it’s not feasible to ...