Web-based chat clients are nothing special these days, with most websites coming with a chat that pops-up from one of the web browser's corners at some point.
What most of these chat implementations have in common is the use of JavaScript, a programming language that today is one of the main technologies for creating interactive web apps and websites, along with CSS and HTML.
To get a sense of what a core web development technology is, JavaScript is currently used by 95.2% of all the websites according to W3Techs.
Hi Expert Team - I am working on my company project and some of the part is going mesh up in only mac firefox and safari browsers. I checked code and came to know there were CSS issue. So is there any way where we can hack css only for mac browsers? Thanks in Advance. If you look in web for CSS hack for Safari then you might find different ways like using body:nth-of-type(1) or body:first-of-type which can be used to apply specific CSS property for Safari but these properties are also supported by Firefox 3.5x.
The CSS-only chat ... whatchamacallit
While developers have previously tried their hand at creating bidirectional web chats without using JavaScript [1, 2, 3] they had to resort to other languages such as Python and also add a number of libraries to the list of requirements.
Two days ago, however, a software developer from San Francisco who goes by the name of Kevin Kuchta managed to do what no one else did before, create a fully-functional two-way chat using only CSS and HTML.
A possible exception is Harmless, a basic CSS-chat app from last year which, unfortunately, has some small inconveniences like infinitely growing DOM and no way to distinguish between the chat's users.
So, it turns out that css background-images don't get loaded until the relevant selector is triggered.
Many people might say 'neat!'
I used it to build a bi-directional CSS-only async chat. pic.twitter.com/0BRGxsTRxy
As Kuchta describes it on css-only-chat's GitHub page, this is a 'truly monstrous async web chat using no JS whatsoever on the frontend' which can be used to send messages between users in a web browser without having to reload the page.
His CSS-only chat works by combining background-images loaded via pseudoselectors and a forever-loading index page which keeps the discussion going and the messages going between browsers.
The developer also explains the inner workings of the CSS-only chat on the project's page, detailing what goes behind the scenes when the data is sent by one of the chat users and when the message is received on the other end.
CSS-only chat's inspiration
Kuchta got his inspiration to create his JavaScript-less async web chat from security researcher Davy Wybiral who recently demonstrated on Twitter how websites can make use of just CSS and HTML to monitor the mouse movements in a browser window from within another web browser window, a tracking method which also works in Tor Browser.
Wybiral's proof-of-concept got a lot of reactions on Twitter and, as pointed out by other Twiter users [1, 2], other techniques to keep track of mouse movements using only CSS and HTML have also been discovered in the past.
Css Hack For Mac Only Games
Some of those CSS-based user tracking methods could be used to collect info like screen resolution, the browser name, link click events, as well as the OS by checking the supported fonts.
Here's a PoC that confirms my hunch.
*Neither* of these windows use JavaScript but the position of the cursor in the left window is sent to the right window. This works on Tor Browser with JS disabled. pic.twitter.com/cnfOy5OkUj
Moving away from the dark side of CSS trickery, Kuchta's proof-of-concept two-way web chat shows just how much can be achieved even without having to rely on interpreted high-level programming languages such as JavaScript.
Obviously, this is not a finished product but, with some extra polishing and a better way to type text, it could actually be a feasible idea to use as a web-based support chat for instance—even though, for some, it may seem like witchcraft.
Related Articles:
As Kuchta describes it on css-only-chat's GitHub page, this is a 'truly monstrous async web chat using no JS whatsoever on the frontend' which can be used to send messages between users in a web browser without having to reload the page.
His CSS-only chat works by combining background-images loaded via pseudoselectors and a forever-loading index page which keeps the discussion going and the messages going between browsers.
The developer also explains the inner workings of the CSS-only chat on the project's page, detailing what goes behind the scenes when the data is sent by one of the chat users and when the message is received on the other end.
CSS-only chat's inspiration
Kuchta got his inspiration to create his JavaScript-less async web chat from security researcher Davy Wybiral who recently demonstrated on Twitter how websites can make use of just CSS and HTML to monitor the mouse movements in a browser window from within another web browser window, a tracking method which also works in Tor Browser.
Wybiral's proof-of-concept got a lot of reactions on Twitter and, as pointed out by other Twiter users [1, 2], other techniques to keep track of mouse movements using only CSS and HTML have also been discovered in the past.
Css Hack For Mac Only Games
Some of those CSS-based user tracking methods could be used to collect info like screen resolution, the browser name, link click events, as well as the OS by checking the supported fonts.
Here's a PoC that confirms my hunch.
*Neither* of these windows use JavaScript but the position of the cursor in the left window is sent to the right window. This works on Tor Browser with JS disabled. pic.twitter.com/cnfOy5OkUj
Moving away from the dark side of CSS trickery, Kuchta's proof-of-concept two-way web chat shows just how much can be achieved even without having to rely on interpreted high-level programming languages such as JavaScript.
Obviously, this is not a finished product but, with some extra polishing and a better way to type text, it could actually be a feasible idea to use as a web-based support chat for instance—even though, for some, it may seem like witchcraft.
Related Articles:
In the current situation it's a challenging task for the web developers to build websites which is compatible with different and popular browsers available (like IE, Firefox, Mozilla, Safari, Google Crome, Opera etc…)
Different browsers have their different ways of serving the web page content and may create problem while using some CSS properties to get a desired output. To avoid these kinds of problems there is are solutions which are called 'CSS hacks' and which are also different for different browsers. Using CSS hack is not recommended as per the W3C validation rules but in some cases we have to use them to get our task done. I knew about CSS hack for IE, Firefox but I came across CSS hack for Safari which I was not aware of and as Safari is one of the mostly used browser in world so I think this information might help others as well to overcome from these kind of browser compatibility issues.
Css Hack For Mac Safari Only
While working on one of my projects I faced a problem where Safari browser was not supporting one of CSS properties and was distrorting the layout, however, it was worknig fine in IE and Firefox. To fix this I had to use a CSS hack for Safari. Here is an simple example which you can test quickly and see the difference.
– Create an HTML file and name as you want, then copy and paste the following code to your file:
The page background will show orange in Safari 3+, Chrome and Opera (< 9.5) browsers. In all other browsers it should show pink.
– Now try opening the file in Firefox/IE and Safari and see the difference. The page background is different in Safari from the background shown in IE.
If you look in web for CSS hack for Safari then you might find different ways like using body:nth-of-type(1) or body:first-of-type which can be used to apply specific CSS property for Safari but these properties are also supported by Firefox 3.5x.
So here the CSS hack I have used is '@media screen and (-webkit-min-device-pixel-ratio:0) ' and here are the few stpes how to use it:
– You don't need write your entire class inside '@media screen and (-webkit-min-device-pixel-ratio:0){}'. As shown in the above example you can just write the required property that you want to apply for Safari. In the above example from the all of the CSS properties of body I want to only change the background-color for Safari so I just specified the CSS classname/ID and the property with different values.
– I also noticed one more limitation which you might need to be careful while using this is the way it is written needs to stay like this which means your new property needs to be written in between '@media screen and (-webkit-min-device-pixel-ratio:0){}' but if you are using any code minifier to minify your CSS file then it will try to remove the extra spaces used which will create problem and this property will not be effective.
Css Hack For Mac Only Software
I hope this information will be helpful. Your comments and suggestions are appreciated.