I use Chrome's Developer Tools a lot and on the whole I prefer it to Firebug, but one thing that I've been noticing lately is that sometimes it fails to show my pseudoelements in the styles area. Sometimes it does, so I know it works occasionally, but some, seemingly, random times it doesn't. The obvious response to that would be "are you sure they are set up properly?" Which I consider each and every time it happens. But the elements are visible in the template, they just don't show up in the styles so I can't edit them.
I'm referring to :before and :after mainly because thats what I use the most.
Has anyone else had this problem? If you haven't, I'm sure this will be hard to answer, but I'll supply any more information I can. I would show you the example where I'm having trouble but it's on a private server.
Related
It has been brought to my attention that a website I'm helping out with sometimes has problems with span elements being injected. Those spans will break the whitespaces and make the text hard to read. Those spans look something like this:
<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>
The website is run with/by WordPress, but that does not seem to be the cause because the affected posts look fine and show no sign of this markup in the post editor or database.
Also, those spans only seem to occur at nighttime. I tried to nail that down, but as so often, I couldn't really verify it yet, as it did not occur again to me, not even at night. Right now everything is fine and none of these spans are present.
I'm guessing it has got something to do with night-mode in browsers (although behaviour was the same in Edge and Firefox) or the night-mode in Windows but then on the other hand I haven't noticed this on any other page yet.
So, this is somewhat strange and hard to nail down, but you'll find copied texts that contain the same markup, when you use a search engine and search for "data-contrast span". So, at least I'm not the only one with this problem.
Any ideas how to nail this down and find out what causes it?
Browser plug-ins are usually given permission to modify page source at run time. I would guess the culprit is a cross-browser extension like Night Eye or Dark Reader.
In general, adding a <span> shouldn't mess with your layout unless your CSS is changing span properties away from the browser defaults.
Option 1
You might be able to fix the issue by adding CSS to control how the layout looks:
span[data-contrast="auto"] {...}
That will select all spans that have that data attribute. Then add styling to counteract the layout issues you see. That said, since the extension is adding the code after the page renders, it may override whatever you do.
Option 2
A better solution would be to create your own dark mode. Most plugins/OS night modes won't mess with your code if you provide your own theme options. A "dark" theme is the 2020 version of being mobile responsive; you should provide it in your code or live with the consequences when users, browser makers, and operating systems make their own decisions.
If you need help creating an alternate theme, CSS Tricks has a good write up.
Since it's not clear what software they are copying from, I've personally experienced this when copying from a Word Doc that's been opened in Microsoft Teams or in SharePoint, and then pasting directly into a website's editor (our site uses the TinyMCE text editor, a commonly utilized free text editor).
My recommendation: copy directly from the desktop version of Word, then paste into the editor and that prevents the "data-contrast" spans.
I assume there must be some hidden spans in non-desktop versions of Word Docs that they add to ensure the document displays the same way as the desktop version. The text editor doesn't know what to do with it, so it strips out everything, but the "data-contrast" portion.
Hope this helps someone out there as the original post was as asked some time ago.
I've been looking for an answer for a while now and I can't seem to find any reasons why this is an issue. I have various places in my style sheets where I use cursor: pointer for UI elements like buttons and links. The majority of the time it works as I expect, but occasionally they just don't want to work. I'd love to say I have a specific example in the style sheets that would ensure replication but that's been the issue. When it happens, it's not just for one element, it's for all of them. I've experienced this across the board with modern browsers and it seems to just be completely random which makes it hard to troubleshoot.
The only thing I've been able to confirm 100% is that if it does happen, I can open developer tools, then select an element to inspect that is supposed to have the cursor: pointer and the effect begins working everywhere again. I'm not sure what's going on here and it's driving me up the wall.
Is there any documentation surrounding this issue or something similar?
I experience it in localhost.
I haven't noticed it in production.
I haven't noticed it on JS Fiddle or Codepen when creating wireframes.
Is it a localhost issue? I've even thought it may be related to something I had done prior, but it happens even as I just navigate the site while debugging, sometimes it works on one page, but come back to the same page later in the session and it may not work anymore.
I know this one's tough and there's not a lot to go on. I don't usually make posts without code, but I'm just wondering if anyone else has experienced the same or a similar issue and resolved it.
I too have experienced this. It's actually not a code issue at all. I've found that the cursor: pointer bug you're experiencing is directly related to the Visual Studio 2017 (and newer) remote debugging browser window.
Solution
In Visual Studio, disable "Enable JavaScript Debugging for ASP.NET (Chrome & IE)".
At the top of your Visual Studio window, go to Debug -> Options. The highlighted item in the screenshow below must be unchecked:
This was a feature added in 2017, and while it helps with debugging JavaScript and TypeScript, it does so by launching a plain browser window ("remote debugger"); that is, no extensions, no bookmarks, no history, etc. The remote debugging browser window seems to have its fair share of bugs.
I saw this same behavior but not while debugging through visual studio. If I hit F12 to go to the Chrome dev tools, then click on an html element. The cursor goes to the style listed according to the style sheet.
I have been told by my boss to add tabindex="1" to the Accessibility link in our site footer so that it will be the first thing that someone who browses a site by keyboard can get to and read about the accessibility steps we take.
I have added tabindex="1" to the link which you can see here, but the browser doesn't seem to respect it at all (tested in Chrome/FF/IE 11). There are no other tabindex attributes on the page that I can see, so surely it should get picked up as the priority by the browser.
There are access keys used on the page, could this throw it out in some way?
I am sure it is something really fundamental, but I can't see what it is. Any help would be appreciated.
Thanks
It works for me, but as a long-time accessibility advocate I'd like to help persuade your boss it's a bad idea.
To see it working I suspect you are on a Mac and you need to enable keyboard navigation. People who need that would typically have it on already.
However, the reasons that adding a positive tabindex are not helpful include:
Someone using a keyboard (or keyboard equivalent device) and can see the screen will be confused. They press tab and suddenly end up at the bottom of the page, then flip back up to the top. Combined with the lack of focus visibility, this will be very difficult to cope with.
Someone using a screenreader will probably not notice the tabindex to start with because the main way of navigating is with 'arrowing' (using up/down to go element by element). However, if they are in the content area and press tab to skip to the next link or form control, they will suddenly go to the bottom of the page. Very confusing.
So in summary: Adding a positive tab index on a link in the footer will negatively impact the people it is supposed to help.
Here are the appropriate ways to use tabindex.
There are quite a lot of obvious accessibility issues on the site, I'd recommend getting some advice.
I've been doing a lot of testing in IE10 lately, and have recently ran into a very strange error.
Right after closing a jQuery UI dialog, IE10 opens up a cursor and allows the user type directly into the page. However, there are no inputs for them to be allowed to put things in, and from using Microsoft's F12 Developer tools, it seems that it is writing directly into the DOM -- an area that was a 'Text - Empty Text Node'. I have no idea where these nodes are coming from, or why the user can put text into one of them. I really have no code to show because it seems to be tied to nothing, and as I keep cutting away layers it still seems to be there.
Has anyone else ran into this? It seems to happen in IE9 as well. I'm at a loss here.
EDIT: In addition, I thought it may be helpful to say that I'm using jQuery datatables here.
Okay, so I have made some progress on this.
It turns out IE10 isn't writing data directly into the DOM -- instead, it dynamically created a text input, didn't recognize it, and then deletes it. You can type directly into it, but if you click off or focus on anything else, then it disappears and leaves completely.
I've still not diagnosed the source of the issue -- I know it only happens in IE, and may include datatables or jQuery UI. I tend to believe it's IE specific, because it's such a rare action and there's no trace of it anywhere else.
Hope this dialog helps someone else down the line. If you find a better answer, please post it!
I have a bit of an issue with design where I have a list item that has taken it on itself to be the far higher than the others. I have a feeling this is because of another element in the design.
I use firebug sometimes and chrome developer tools the rest of the time.
These tools can be used to see what the height of something is, or what css styles are effecting the object but what these tools don't do however is show how other objects are effecting other objects.
Has anybody come across a tool which shows the relationship objects in a design are having on each other? Its a long shot, but if there were a place to find out it would be here at SO.
Thanks.
Have a look at webdeveloper available for Chrome and Firefox. This is a very extensive plugin but should be able to do what you need.
Install it > go to the page you want to debug > Cycle trough various Outline options. Start off with "Outline block level elements" and work your way from there.
Do tell me if I misunderstood your question, but with either Firebug or the Chrome Developer Tool, you should be able to inspect the nesting of different elements in your design, and see how a design will look after you delete one of those elements.
The only tricky part is learning how to use those tools, and for that I suggest you watch some youtube videos. For me at least, that's the way I've learned. Unless someone can show you in person, the next best alternative is someone showing you how those tools work through a video.