CSS Magical Formulas

After stumbling upon information about deprecated CSS expressions and how they should not be used, I became intrigued. I came across a code snippet that could keep a floating element in place on the screen even while scrolling.

<html>
<style>
#fixed {
position:absolute;
left:10px;
top:expression(body.scrollTop + 50 + "px");
background:white;
border:1px solid red;}
</style>
<body>
<p id="fixed">Here is some text, which is fixed.</p>
<p>
[many times: "stuff <br/>"]
</p>
</body>
</html>

This functionality reminded me of websites with persistent "share bars" and content at the bottom of their pages.

So...

  1. Could this be how those sites achieve it?
  2. Is using Expressions in this scenario acceptable?
  3. If not, what alternative should be considered?
  4. Are there any other useful or interesting applications for CSS expressions?

Answer â„–1

In the past, CSS expressions were functional on older versions of Internet Explorer, but they have since been completely phased out in IE8:

Dynamic properties (also known as "CSS expressions") are no longer supported in Internet Explorer 8 and later, specifically in IE8 Standards mode and above. This decision was made to adhere to standards, enhance browser performance, and improve security, as outlined in the blog post titled Ending Expressions on IE’s official site. However, dynamic properties can still be utilized in Internet Explorer 8 when in either IE7 mode or IE5 mode.

Therefore, investing time in learning them may not yield significant benefits anymore.

If not, what alternatives should I consider?

Depending on your specific requirements, you can opt for JavaScript or explore options such as media queries.

As suggested by @Yet Another Geek, the example given above could be achieved using position: fixed. It's worth noting that this approach might have been expedient due to lack of support for this property in IE6.

Answer â„–2

To prevent an element from moving while scrolling, you can utilize the position:fixed property along with top, bottom, left, and right properties to specify its exact position on the page.

UPDATE: Here is an example of how to achieve this:

<html>
<style>
#fixed {
position: fixed;
left: 10px;
top: 50px;
background: white;
border: 1px solid red;
}
</style>
<body>
<p id="fixed">This text will remain fixed on the page.</p>
<p>
[multiple instances of: "other content <br/>"]
</p>
</body>
</html>

Answer â„–3

  1. Perhaps not the best option. Consider using `position:fixed` or Javascript for better results
  2. Unless you're exclusively targeting IE < 8, avoid using it. Newer browsers like IE8+ don't support this method and it's not standards compliant, risking validation issues
  3. Try employing `position:fixed; bottom:x; top:y; left: a; right:b;` with x, y, a, and b as offsets. Alternatively, use Javascript for similar effects
  4. Avoid unless focusing on outdated versions of IE. Opt for JS and standard CSS for achieving the same outcomes

*This technique may work unofficially in Chrome based on @DalexL's experience

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can AngularJS store a collection of values obtained from an HTTP GET request?

By making a call to the $resource URL from the controller, I am able to retrieve a list that is visible in the logs. Controller function ClubDetailController($scope, $rootScope, $stateParams, $resource, DataUtils, entity, Club) { var vm = this; ...

Sharing a component via a module does not connect HTML attributes within the Document Object Model

Currently, I am working on a portfolio Angular 8 app and decided to create my own lazy load module for specific components instead of using Angular's loadChildren for learning purposes. However, I am facing an issue with binding DOM attributes and dir ...

An innovative tool for discovering how different colors will complement each other

Design may not be my strong suit, but there are times when I need to add a border line or a shade of gray to a background color. Is there a tool available where I can specify background color: #343434 color: #asdfgh and visually see how it will look wit ...

Preventing default behavior in a JQuery post request

Encountering an issue with jQuery functionality on a mobile device. function send() { $.post("scripts/post.php", { username: $("input[name=username]").val(), password: $("input[name=password]").val() }, function(data) { if ($(".data div" ...

Show a segment of HTML code if specific data is found in the JSON data

I am looking to dynamically display a section of HTML code based on the data in a JSON file. If certain characters, such as * or -, are present in the JSON data, then I want the corresponding HTML section to be visible. Otherwise, I do not want that sectio ...

Is it feasible to make Twitter's Typeahead plugin have an initial slide down or fade in effect?

Does anyone have an easy way to make the dropdown from Twitter's typeahead jQuery plugin initially slide down or fade in? I'm trying to animate the size of the dropdown menu when it adjusts, but even a simple fade or slide in would be fine. I pre ...

What is the best way to ensure that the background of wrapped text extends precisely to the pixel distance of the text?

Having a simple issue that I believed could easily be solved with modern CSS, but I'm now confused. I was aiming to have the background of a text parent span precisely across the width of its longest text line, evenly spreading on the sides, different ...

Tips for saving the latest counter value in CSS and showcasing it as content in HTML

Here is an example of how my CSS code is structured: .page-number:after { counter-increment: page; } If we were to display 6 pages, it would look something like this: .page-number:after { content: 'Page ' counter(page) ' of'; } ...

Modifying alignment of buttons in React components

Transforming the typical Tic Tac Toe game from the React tutorial, with an added one-player feature. Oddly, button alignment shifts out of place once a value is inserted; causing the button to drop by about 50px until the row is filled with values, after ...

How can I customize the appearance of a checkbox button in JavaFX?

I am currently working on styling a JavaFX scene with CSS in a stylesheet. The goal is to apply styles to all the "basic" elements of the scene when it loads. My issue lies in finding the correct code combination to change the background color of a button ...

Page loaded with activated Flash functionality

Curious if there's a way, To have my flash map on the site automatically activated upon page load, as opposed to requiring a click to interact with it. I've noticed that some websites already have their flash content active when the page loads, ...

Presentation and selection list

Here is the CSS code I am using: .nav li a { background-color:#000; color:#fff; text-decoration:none; padding:10px 15px; display:block; } .nav > li { float:left; } .nav li a:hover { background-color:#4db4fa; } .nav li ul { ...

Placing a GIF on top of an image through the use of Javascript

Welcome to my first post on this platform! I'm currently in the process of creating a portfolio website featuring long panoramic photographs displayed within scrollable divs. You can check it out here: www.edentan.co.uk/portfolio.html. My challenge ri ...

Elevate your website with Bootstrap 4's compact floating icon menu

I've been searching online, but I can't seem to find exactly what I need. My goal is to create a compact Sidebar menu that stays on the left side and is centered. The only solution I came across was this: `https://codepen.io/kemsly/pen/mJxwJg` ...

Unknown error detected in Ajax URL connection

<html> <head> <meta charset="utf-8"/> <script src="../JQUERY/jquery-1.11.0.js"></script> <script> function fetchMenuOptions() { var html = ""; $.ajax( { //url: 'http://server.com/?method=get&a ...

The {shade} of the code has been modified within brackets

Ever encountered your code's colors abruptly changing to red and green in the middle of an HTML page? My editor is Brackets, and while it doesn't pose any issues, it's really bothersome and makes the code difficult to read: Take a look at t ...

Is jQuery or CSS necessary for differentiating between a standard image and a highlighted image?

Apologies if this has been asked before, but I'm in need of your assistance. Here's what I'm looking for: Imagine I have an image that is clickable in its normal state: https://i.sstatic.net/pGYyG.png Now, when I click on that image, I wa ...

Is it feasible to remain on the page and receive a confirmation message once the file has been successfully uploaded

After uploading and clicking Submit, the page changes without using the JavaScript below. The JavaScript is meant to ensure that the page remains unchanged. Issue While the HTML and JavaScript keep the page as desired and retrieve the radio button value, ...

Is it not possible to import in SCSS if the variable is equal to the value?

In my project, I am utilizing scss. There is a variable that determines which scss file needs to be imported based on its value. I attempted the following approach: $test: 1; @if $test == 1 { @import "./theme1.scss"; } However, an error message is dis ...

angular ng-view: appears after being concealed

When it comes to showcasing content with ng-animate and ng-view, I must admit it adds a touch of sexiness. However, I'm facing an issue where I want the second content to show only after the first content has been hidden, but I can't seem to figu ...